Android视口设置"user-scalable = no"会中断视口的宽度/缩放级别

Question

我正在开发一个宽度为640px的网络应用程序.

在head我设置的文件中

  <meta name="viewport" content = "width=640, user-scalable=no" />

所以内容很好地显示和水平拉伸.
这在iOS上完美运行,但在Android中浏览器打开放大的网站,因此用户必须双击缩小和整个页面.

当我更改视口设置以省略user-scalable标记时:

<meta name="viewport" content="width=640" />

Android浏览器很好地调整到640px - 所以它的工作原理.
然而现在的问题是,用户可以在Android和iOS上放大和缩小,因为user-scalable标签未设置.

如何禁止缩放,同时在Android上将视口宽度设置为640px？

Answer 1

尝试渲染视口元标记,如下所示:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

设置比例设置将设置用户对它们可以缩放的距离的限制,因此如果将初始值和最大值设置为相同的量,这应该可以解决问题.

更新:通过设置如下,我能够一起修复我的Android设备的bug:

<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />

我还注意到一些内容,例如p标签没有在屏幕上流动,因此黑客就是将带有空字符串的background-image属性添加到任何被卡住但未穿过布局视图的内容.希望这对你有所帮助.

Answer 2

我希望移动设备能够始终显示640px宽的网站,因为其他设计会破坏.(我没做的设计..)因此我想禁用移动用户的缩放.对我有用的是以下内容:

- 更新2013-10-31

首先,如果没有Javascript,你无法做到这一点.您必须检查用户代理字符串.因此,我创建了一个mobile-viewport.js,并在结束标记之前包含了脚本:

function writeViewPort() {
    var ua = navigator.userAgent;
    var viewportChanged = false;
    var scale = 0;

    if (ua.indexOf("Android") >= 0 && ua.indexOf("AppleWebKit") >= 0) {
        var webkitVersion = parseFloat(ua.slice(ua.indexOf("AppleWebKit") + 12));
        // targets android browser, not chrome browser (http://jimbergman.net/webkit-version-in-android-version/)
        if (webkitVersion < 535) {
            viewportChanged = true;
            scale = getScaleWithScreenwidth();
            document.write('<meta name="viewport" content="width=640, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + '" />');
        }
    }

    if (ua.indexOf("Firefox") >= 0) {
        viewportChanged = true;
        scale = (getScaleWithScreenwidth() / 2);
        document.write('<meta name="viewport" content="width=640, user-scalable=false, initial-scale=' + scale + '" />');
    }

    if (!viewportChanged) {
        document.write('<meta name="viewport" content="width=640, user-scalable=false" />');
    }

    if (ua.indexOf("IEMobile") >= 0) {
        document.write('<meta name="MobileOptimized" content="640" />');
    }

    document.write('<meta name="HandheldFriendly" content="true"/>');
}

function getScaleWithScreenwidth() {
    var viewportWidth = 640;
    var screenWidth = window.innerWidth;
    return (screenWidth / viewportWidth);
}

writeViewPort();

该脚本检查访问者是否有android(不是chrome)或firefox浏览器.android浏览器不支持width = 640和user-scalable = false的组合,并且firefox浏览器确实有一个双屏宽度,原因有些奇怪.如果访问者有一个Windows手机IE浏览器MobileOptimized设置.