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

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

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

灵感来源： 动态视口调整大小 - Phonegap 忽略视口

和莫纳卡： 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（Mini 和常规）相同。在报告屏幕宽度为 601px 的 Nexus 7 上，我可以使用与 iPad 相同的 CSS。