我有一个在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
= "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no";
} else {
document.getElementById("viewport").content
= "width=768,initial-scale=" + 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,但宽度和字体的真正缩放会更好.
最佳答案
你需要设置webView.getSettings().setUseWideViewPort(true);否则WebView将忽略元标记
原文链接:https://www.f2er.com/android/431038.html