我有一个在Android和IOS上运行的App/WebApp.我在IOS和Android上将其部署为WebApp和本机PhoneGap应用程序.我使用PhoneGap Build构建本机应用程序.平板电脑用户界面的内部像素宽度为768,可在iPad和iPad Mini上正常工作.对于Nexus(纵向为601px宽)我通过将视口宽度设置为768px并将缩放设置为:
var gViewportScale = (Math.min(window.screen.width, window.screen.height) / window.devicePixelRatio) / 768; if (gViewportScale >= 1) { document.getElementById("viewport").content = "; } else { document.getElementById("viewport").content = " + gViewportScale + ", minimum-scale=" + gViewportScale + ", maximum-scale=" + gViewportScale + ", user-scalable=yes"; }
这模仿了iPad Mini的行为.几个月前,这个工作很好.我认为当我升级到Android 4.4并更改为Chromium时,这可能已经破裂.现在,Android PGB原生App的活动区域比显示器宽.WebApp继续像以前一样在Android Chrome(33.0.1750.136)中正确显示(即它以纵向填充显示宽度).也适用于IOS中的本机App或WebApp.
我已经尝试了几种替代方案和所有当前版本的PGB和附近,因为我可以告诉Android WebView忽略了使用PhoneGap的视口元标记,但没有在Chrome上.它当然看起来像一个Android bug,它可以在一个而不是另一个上运行.
我在PhoneGap支持社区中问过这个问题,到目前为止还没有很好的答案.我以为我会在这里试试.当然,我可以为Nexus提供单独的CSS,但宽度和字体的真正缩放会更好.