android - 视口(viewport)元标记在 Android 4.4 WebView 中被忽略

Question

我有一个在 Android 和 IOS 上运行的 App/WebApp。我在 IOS 和 Android 上将它部署为 WebApp 和 native PhoneGap 应用程序。我使用 PhoneGap Build 构建 native 应用程序。平板电脑用户界面专为 768 的内部像素宽度而设计，在 iPad 和 iPad Mini 上运行良好。对于 Nexus(纵向 601 像素宽)，我通过将视口(viewport)宽度设置为 768 像素并将缩放比例设置为来伪造它:

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 native 应用程序的 Activity 区域比显示器更宽。 WebApp 继续像以前一样在 Android Chrome (33.0.1750.136) 中正确显示(即它以纵向填充显示宽度)。也可以作为 IOS 中的 native 应用程序或 WebApp 正常工作。

我已经尝试了几种替代方案，所有当前版本的 PGB 和接近我可以告诉的 Android WebView 忽略了 PhoneGap 的视口(viewport)元标记，但在 Chrome 上没有。它适用于一个而不适用于另一个，这看起来确实像是一个 Android 错误。

我已经在 PhoneGap 支持社区中问过这个问题，但到目前为止还没有很好的答案。我想我会在这里试试。当然，我可以为 Nexus 使用单独的 CSS，但宽度和字体的真实缩放会更好。

Answer 1

您需要设置 webView.getSettings().setUseWideViewPort(true); 否则 WebView 将忽略元标记