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设备的所有错误：

<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。

Answer 3

我有同样的情况，如果你希望内容总是适合屏幕宽度而不允许用户放大/缩小，请使用以下元标记（无论你给出的宽度如何，这都会有效）

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

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

3 个答案: