这三种方法我都试过了,但都无济于事:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />

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

每个是不同的值,我发现谷歌搜索或SO搜索推荐,但没有一个'user-scalable=X'值似乎是工作的

我还尝试用逗号来分隔值,而不是分号,运气不好。然后我尝试只呈现用户可扩展的价值,但仍然没有成功。


更新

从苹果的网站上得到了这个,它是有效的:

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

事实证明,问题是不标准的引号,因为我从一个网站复制了元标签,正在使用他们,哎呀


编辑:在ios10之后可能无法工作,请参阅下面基于触摸动作的解决方案。

您的代码将属性双引号显示为花哨的双引号。如果花哨的引号出现在您的实际源代码中,我猜这就是问题所在。

这对我来说在iOS 4.2的Mobile Safari上是有效的。

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

有时候内容标签中的其他指令会打乱苹果关于如何布局页面的最佳猜测/启发式,你只需要禁用缩放。

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

试着在你的头标签上添加以下内容:

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

另外

<meta name="HandheldFriendly" content="true">

最后,无论是作为一个样式属性还是在你的css文件中,为基于webkit的浏览器添加以下文本:

html {
    -webkit-text-size-adjust: none
}

为了符合WAI WCAG 2.0 AA可访问性要求,您必须永远不要禁用缩放。(WCAG 2.0: SC 1.4.4 Resize text Level AA)。你可以在这里阅读更多关于它的内容:移动辅助功能:WCAG 2.0和其他W3C/WAI指南如何应用于移动,2.2缩放/放大


在Safari 9.0及以上版本中,您可以在视口元标签中使用如下所示的“缩小到适合”

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

对于寻找iOS 10解决方案的人来说,在iOS 10的Safari中,user-scaleable=no是禁用的。原因是苹果正试图通过允许人们放大网页来提高可访问性。

来自发行说明:

为了提高Safari网站的可访问性,用户现在可以 中设置了user-scalable=no时,也可以缩放 视窗。

所以据我所知,我们运气不好。


@mattis是正确的,iOS 10 Safari不允许你禁用用户缩放属性的缩放。但是,我在'gesturestart'事件上使用preventDefault禁用了它。我只在iOS 10.0.2的Safari上验证了这一点。

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

user-scalable=0

这在iOS 10上不再适用。苹果删除了这一功能。

没有办法你可以禁用缩放网站在iOS现在,除非你做gross平台应用。


对于iphone safari到iOS 10“viewport”不是一个解决方案,我不喜欢这种方式,但我已经使用了这个javascript代码,它帮助了我

 document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
      event.preventDefault();
    }
  }, false);

这在IOS 10.3.2中运行良好

    document.addEventListener('touchmove', function(event) {
        event = event.originalEvent || event;
        if (event.scale !== 1) {
           event.preventDefault();
        }
    }, false);

谢谢@arthur和@aleclarson


这个应该可以在iphone上运行。

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

我愚蠢地设置了一个包装器div,其宽度以像素为单位。其他浏览器似乎足够聪明,可以处理这个问题。一旦我将宽度转换为百分比值,它在Safari手机上也能正常工作。很烦人。

.page{width: 960px;}

to

.page{width:93.75%}

<div id="divPage" class="page">
</div>

我设法通过向HTML头添加以下内容来阻止这种行为。这适用于移动设备,因为桌面浏览器在使用鼠标滚轮时支持缩放。这在桌面浏览器上不是什么大问题,但考虑到这一点很重要。

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

和下面的规则到CSS样式表

html { -webkit-text-size-adjust:没有; touch-action:操纵; }


我在iOS 12中使用以下代码:

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

使用第一个if语句,我确保它只会在iOS环境中执行(如果它在Android中执行,滚动行为将被破坏)。另外,请注意被动式选项设置为false。


使用CSS的touch-action属性是最优雅的解决方案。在iOS 13.5和iOS 14上测试。

禁用缩放手势和双击缩放:

body {
  touch-action: pan-x pan-y;
}

如果你的应用程序也不需要平移,即滚动,使用这个:

body {
  touch-action: none;
}

如上所述,这个解决方案在2020年底基本有效:

document.addEventListener(
    'gesturestart', (e) => e.preventDefault()
);

但缺点是,当你在滚动时,你仍然可以捏它,然后它就卡住了。 解决方案是禁用滚动。

body {
    overflow: hidden;
}

但是,如果您仍然希望滚动页面呢? 您仍然可以使用另一个<div>设置为overflow:auto:

<body>
    <div id='app'></div>
</div>

然后

body {
    overflow: hidden;
}

 #app {
     -webkit-overflow-scrolling: touch;
      height: 100vh;
      height: -webkit-fill-available;
      overflow: auto;
 }

实际上苹果在最新的iOS版本中禁用了user-scalable=no。 我尝试了一下,这种方法是可行的:

body {
  touch-action: pan-x pan-y;
}

截至今天(2022年10月),在iOS 14.8上,我可以完全防止双击缩放的唯一方法是:

document.addEventListener("click", (e) =>
        {
            e.preventDefault();
        })

即使是这样的:

* {
    touch-action: none !important;
}

(这显然是不现实的,但只是为了演示目的)在每种情况下都是不够的。事实证明,任何我处理过的for元素点击,双击它将导致几乎不可逆的放大,完全忽略触摸操作设置。但是如果我在点击处理程序中调用preventDefault(),它就不会缩放。因此,到目前为止,在文档级别上这样做似乎就足够了,这样我就不必每次处理单击时都这样做。

我不知道这可能会有什么副作用,但我相信如果人们想到了什么,他们会插话的。


我尝试了以上所有方法,但这在IOS设备上很管用:

<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0">