Android 4.4 WebView中忽略的视口元标记

Question

我有一个可在Android和IOS上运行的App / WebApp。 我将其部署为IOS和Android上的WebApp和本机PhoneGap应用程序。 我使用PhoneGap Build构建本机应用程序。 平板电脑用户界面的内部像素宽度为768，可在iPad和iPad Mini上正常工作。 对于Nexus（纵向宽601像素），我将视口宽度设置为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的行为。 直到几个月前，这种方法一直有效。 我认为在将Chromium更改为Android 4.4时，这种情况可能已经失效。 现在，Android PGB本机应用程序的活动区域大于显示区域。 WebApp继续像以前一样在Android Chrome（33.0.1750.136）中正常显示（即，以纵向填充显示宽度）。 也可以在IOS中作为本机应用程序或WebApp正常工作。

我已经尝试了几种替代方法，并尝试了所有当前版本的PGB及附近版本，因为我可以告诉Android WebView忽略了PhoneGap的视口meta标签，但没有使用Chrome。 当然，这似乎是一个Android错误，它只能在一个而不是另一个上运行。

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

Answer 1

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

Answer 2

我有一个变通办法，不能解决视口标签被忽略的事实，但可以解决原始视口缩放问题，其方式可能比使用视口标签更好。

启发人： 动态调整视口大小-Phonegap会忽略视口

和monaca： https : //github.com/monaca/monaca.js

我使用了固定的视口标签内容：

width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no

然后使用缩放，Android和Chrome显然支持：

/*
 * Make sure that the device is scaled so that it is at least minWidth px in width
 * in any orientation. This is done by setting the zoom appropriately.
 * Right now, we only need this on Android, which supports zoom.
 * Plan B is to use transforms with scale and transform-origin.
 */
function setupScale (minWidth) {
    var viewWidth = Math.max(document.documentElement.clientWidth, window.innerWidth);
    var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
    var portWidth = Math.min(viewWidth, viewHeight);
    var landWidth = Math.max(viewWidth, viewHeight);
    var fixScale = function () {
        if (Math.abs(window.orientation) != 90) {
            // portrait
            document.body.style.zoom = portWidth / minWidth;
        } else if (landWidth < minWidth) {
            // landscape, but < minWidth
            document.body.style.zoom = landWidth / minWidth;
        } else {
            // landscape >= minWidth. Turn off zoom.
            // This will make things "larger" in landscape.
            document.body.style.zoom = 1;
        }
    };

    if (gPortWidth >= minWidth) {
        return;     // device is greater than minWidth even in portrait.
    }
    fixScale();                             // fix the current scale.       
    window.onorientationchange = fixScale;  // and when orientation is changed
}

对于我的应用程序，它使我可以将网页的最小宽度设置为768。这与iPad（最小和常规）相同。 在报告屏幕宽度为601px的Nexus 7上，我可以使用与iPad相同的CSS。

Answer 3

我刚刚创建了一个小插件来解决这个问题（通过使用setUseWideViewPort（true））： https : //github.com/gitawego/cordova-viewport-fix ，如果您不想直接在源代码中进行修改，则可以使用这个插件。

Answer 4

为了在webView中使用视口，您需要启用setUseWideViewport和setLoadWithOverviewMode

mWebView.getSettings().setUseWideViewPort(true);
mWebView.getSettings().setLoadWithOverviewMode(true);

参考： WebView中的像素完美UI