移动的全宽度不可能是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; }