安卓视口设置"user-scalable=no"会破坏视口的宽度/缩放级别。

Question

安卓视口设置"user-scalable=no"会破坏视口的宽度/缩放级别。

18

我正在制作一个宽度为640像素的Web应用程序。

在文档的 head 中，我设置了

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

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

当我更改视口设置，省略user-scalable标签，像这样：

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

Android浏览器可以很好地适应640像素，因此它可以正常工作。但现在的问题是，在Android和iOS上，由于未设置user-scalable标签，用户可以缩放屏幕。

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

- Horen

1

这是浏览器的 bug。我尝试了所有方法，但都没有起作用。最后，我只从这个浏览器中删除了 user-scalable=no，现在它可以正常工作了。 - Barlas Apaydin

3个回答

7

我希望移动端网站总是显示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();

该脚本检查访问者是否使用安卓（非chrome）或火狐浏览器。安卓浏览器不支持width=640和user-scalable=false的组合，而火狐浏览器由于某种奇怪的原因具有双倍的屏幕宽度。如果访问者使用Windows Phone IE浏览器，则设置MobileOptimized。

- pkmelee337

哦，谢谢您。我必须对其进行一些调整才能适用于我的特定网站，但是现在我可以得到一个完美适配浏览器大小的网站，甚至在老旧的安卓设备上也能正常显示。 - jeffedsell

0

我曾经遇到过同样的情况，如果你想让内容始终适应屏幕宽度而不允许用户缩放，可以使用以下元标记（无论你给出什么宽度都可以）

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

- Nitin

显然，当将initial-scale设置为1.0时，它会调整为320px，因此页面加载时会放大（我的页面宽度为640px）。将initial-scale设置为0.5也可以像640px一样工作。无论我使用“,”还是“;”，user-scalable=no选项都会破坏Android - 所以仍然没有解决方案:( - Horen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ben Sewards · Accepted Answer

尝试像这样渲染视口 meta 标签：

    <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 属性。希望这次能对你有所帮助。