可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Problem description:

Currently developing code in phonegap, using requirejs,backbone and jquery. If I display the app on an android phone and the screen in held vertically(width is narrower than height) then the rendering the page does not occupy full width(stuck at 95% or so). If I rotate the phone then the screen occupies 100% visible width.

Even setting width of div inside the body does not render 100% ...

Device being shown on has android 2.3.5 version and the build on phonegap has

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

HTML AND CSS:

The following are the index.html and the concerned 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>

and 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;
}

Key things in css: Body contains "overflow-x": hidden and the viewport is set default from phonegap.

Any clue of how to correct his would be greatly appreciated...

回答1:

Hopefully this helps others...after a lot a struggle this is what works...wonderfully...simple...

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

Also note without the overflow-x:hidden the solution is crappy. The screen can be moved to the left.

that's all...(the fixed positioning is not needed...but the margins are ....)

Also what is observed is that the ripple tool in chrome does not replicate the real device always...In my case the fixed header is actually not fixed but is still scrollable...but on ripple I see it as fixed...

Question is how on earth can I know how this will work on other devices....? Any clue will be helpful....

回答2:

Position fixed issue explains in your link and here: http://bradfrostweb.com/blog/mobile/fixed-position/

Fixed header is actually not hard. Why don't you just flow it and do something like this? 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;
}