Question

我有一个在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，但宽度和字体的真正缩放会更好。

Answer 1

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

Answer 2

我有一个解决方法，它不能解决视口标记被忽略的问题，但它解决了原始视口缩放问题，其方式可能比使用视口标记更好。

灵感来自： Dynamic viewport resizing - Phonegap ignores viewport

和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

然后使用zoom，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，如果您不想直接在源代码中修改，则可以使用此插件。< / p>

Answer 4

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

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

参考：Pixel perfect UI in the WebView

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

4 个答案: