移动的全宽度不可能是phonegap,requirejs,jquery

问题描述:

目前正在使用requirejs,backbone和jquery在phonegap中开发代码。 如果我在Android手机上显示应用程序并且屏幕垂直保持(宽度比高度窄)那么渲染页面不会占据整个宽度(卡在95%左右 )。 如果我旋转手机,则屏幕占据100%可见宽度。

甚至在体内设置div的宽度也不会呈现100%……

显示的设备有android 2.3.5版本和phonegap上的构建

 

HTML和CSS:

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

         

和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。

如何纠正他的任何线索将不胜感激…

希望这有助于其他人……经过多次努力之后,这才是有效的……非常……简单……

 .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中的波纹工具并不总是复制真实设备……在我的情况下,固定头实际上并没有固定但仍然可以滚动……但是在波纹上我看到它是固定的……

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

已修复职位的问题在您的链接和此处说明: 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; }