手机的全宽不可能phonegap，requirejs，jquery [英] Full width of the mobile not possible phonegap,requirejs,jquery
问题描述
问题描述:
当前正在使用requirejs，backbone和jquery在phonegap中开发代码.如果我在Android手机上显示应用程序，并且屏幕垂直放置(宽度比高度窄)，则 呈现页面不会占据整个宽度(停留在95％左右 ).如果我旋转手机，那么屏幕将占据100％的可见宽度.
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.
即使在主体内部设置div的宽度也不会呈现100％...
Even setting width of div inside the body does not render 100% ...
显示的设备具有android 2.3.5版本，而phonegap上的版本具有
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和CSS:
以下是index.html和相关的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>
和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中的关键事项:
主体包含"overflow-x": hidden，并且视口已从phonegap设置为默认值.
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...
推荐答案
位置固定的问题在您的链接中和此处进行了说明: http://bradfrostweb.com/blog/mobile/fixed-position/
Position fixed issue explains in your link and here: http://bradfrostweb.com/blog/mobile/fixed-position/
固定标头实际上并不难.您为什么不顺其自然地做这样的事情? http://jsfiddle.net/9twqj/
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;
}
这篇关于手机的全宽不可能phonegap，requirejs，jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
