Android视口设置“user-scalable=no”会破坏视口的宽度/缩放级别

Question

我正在开发一个宽度为 640 像素的网络应用程序。

在文档head我设置

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

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

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

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

Android 浏览器可以很好地调整到 640 像素 - 所以它可以工作。
然而现在的问题是，由于没有设置user-scalable 标签，用户可以在 Android 和 iOS 上放大和缩小。

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

Answer 1

我希望移动设备始终显示 640 像素宽的网站，因为否则会破坏设计。 （我没有做的设计..）因此我想禁用移动用户的缩放。对我有用的是以下内容：

- 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 phone IE 浏览器 MobileOptimized 被设置。

Answer 2

尝试像这样渲染视口元标记：

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

设置缩放设置将设置用户缩放范围的限制，因此如果您将初始值和最大值设置为相同的量，这应该可以解决问题。

更新：通过设置以下内容，我能够一起修复我的 Android 设备错误：

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

我还注意到某些内容，例如 p 标签没有在屏幕上流动，因此解决方法是将带有空字符串的 background-image 属性添加到任何被卡住并且没有穿过屏幕的内容中布局视图。希望这次对您有所帮助。

Answer 3

我有同样的情况，如果您希望内容始终适合屏幕宽度而不允许用户放大/缩小，请使用以下元标记（无论您给出什么宽度都可以）

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