0

问题描述：

目前在 phonegap 中开发代码，使用 requirejs、backbone 和 jquery。如果我在 android 手机上显示应用程序并且屏幕垂直保持（宽度比高度窄），那么页面的渲染不会占据整个宽度（停留在 95% 左右）。如果我旋转手机，那么屏幕将占据 100% 的可见宽度。

即使在体内设置 div 的宽度也不会呈现 100% ...

显示的设备具有 android 2.3.5 版本，并且在 phonegap 上的构建具有

<uses-sdk android:minSdkVersion="7" android:targetSdkVersion="15"/>

HTML 和 CSS：

以下是 index.html 和相关的 css：

  <body>
 <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=1, initial-scale=1, minimum-scale=1, maximum-scale=1.0, width=device-width, height=device-height, target-densityDpi=device-dpi" />

    <...and host of css....>

     </head>
    <header class="header">
      <img .....some image/>
    </header>

    <div id="page-wrap"> 
      <div class="mcontent"></div>
    </div>  

    <!-- native libs -->
    <script type="text/javascript" src="cordova.js"></script>
    <!-- third party libs -->
    <script type="text/javascript" data-main="js/scripts/main" src="js/scripts/vendor/require.js"></script>


  </body></html>

和CSS：

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    margin:0px;
    padding:0px;
/*    text-transform:uppercase;*/
    height: 100%; 
    overflow-x:hidden;
}

#page-wrap{
    background: none repeat scroll 0 0 #FFFFFF;
    display:block;
}

.header{
    height:100px;
    background:#ccff33;  /* #4fd5d6; */
    width:100%;    
}

.header .logo{
    padding-top:10px;
    padding-left:20px;
    height:60px;
    line-height:100px;
    font-height:60px;
    font-weight:bold;
}

css 中的关键内容：Body 包含"overflow-x": hidden并且视口是从 phonegap 设置的默认值。

任何关于如何纠正他的线索将不胜感激......

4

2 回答 2

0

希望这对其他人有所帮助……经过一番努力，这就是有效的方法……太棒了……简单……

.header{
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    position:fixed;
    overflow-x:hidden;
    top:0;
    z-index:1;
}

还要注意没有溢出-x：隐藏的解决方案很糟糕。屏幕可以向左移动。

就是这样......（不需要固定定位......但边距是......）

另外观察到的是chrome中的涟漪工具并不总是复制真实设备......在我的情况下，固定标题实际上不是固定的，但仍然是可滚动的......但是在涟漪上我认为它是固定的......

问题是我到底怎么知道这将如何在其他设备上工作......？任何线索都会有所帮助....

于 2013-06-14T18:38:49.450 回答
0

位置固定问题在您的链接和此处解释：http: //bradfrostweb.com/blog/mobile/fixed-position/

固定标头其实并不难。你为什么不让它流动并做这样的事情呢？ http://jsfiddle.net/9twqj/

html, body {
 margin: 0;
 height: 100%; /* needed for container min-height */
 text-align: center;
 vertical-align: top;
 overflow: hidden;
 padding: 0;
}

header {
 height: 20px;
 width: 100%;
 background-color: black;
 color: white;
 overflow: hidden;
}

#content {
 overflow-y: auto;
 overflow-x: hidden;
 max-height: 100%;
 min-height: 100%;
 text-align: left;
 -webkit-overflow-scrolling: touch;
 background-color: blue;
 color: white;
}
于 2013-06-14T21:27:02.277 回答