La pagina se ve mal con bootstrap y phonegap

Z

Pues he empezado con phonegapp y la pagina en el navegador se ve bien pero en el telefono ,el fondo no se ve plano se ve asi
Esto ocurre al usar bootstrapp ,alguna idea de que puede ocurrir?
El codigo esun simple html con un hola mundo

<!DOCTYPE html>
<!--
    Copyright (c) 2012-2014 Adobe Systems Incorporated. All rights reserved.

Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> 
        <title>Hello World</title>
    </head>
    <body>
        <div class="container">
            <div>
                <div class="row">
                    <h1>Hola mundo!!!!</h1>
                    <a href="pagina2.html">Enlace</a>
                </div>
            <div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>
Setibi

Prueba a poner en este orden el css:

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />

Luego en la parte javascript asi:

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>

Y en la parte del "container":


<div class="container">
       <div class="row">
                <div class="col-xs-12">
                         <h1>Hola mundo!!!!</h1>
                         <a href="pagina2.html">Enlace</a>
                </div>
        <div>
</div>
Z

Lo soluciones poniendo la altura del container a100vh

Usuarios habituales