Question

我已经尝试了所有这三个都无济于事：

<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'值似乎都没有工作

我也尝试用逗号分隔值而不是分号，没有运气。然后我尝试只提供用户可扩展的值，但仍然没有运气。

更新

从Apple的网站上获取此信息并且有效：

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

事实证明问题是非标准引号，因为我从使用它们的网站复制了元标记，哎呀

Answer 1

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

这适用于iOS 4.2中的Mobile Safari。

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

Answer 2

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

从发行说明：

为了改善Safari网站的可访问性，用户现在可以即使网站设置了user-scalable = no，也会捏缩放视口。

据我所知，我们很幸运。

Answer 3

@mattis是正确的，iOS 10 Safari不允许您使用用户可伸缩属性禁用缩放缩放。但是，我在“gesturestart”事件中禁用了preventDefault。我只是在iOS 10.0.2中的Safari上验证了这一点。

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

Answer 4

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

要禁用双指缩放手势并双击以缩放：

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

如果您的应用也不需要平移（即滚动），请使用以下方法：

body {
  touch-action: none;
}

Answer 5

for iphones safari直到iOS 10“viewport”不是解决方案，我不喜欢这种方式，但我已经使用了这个javascript代码，它帮助了我

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

Answer 6

尝试在head-tag中添加以下内容：

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

Answer 7

user-scalable=0

这不再适用于iOS 10. Apple删除了该功能。

你现在无法在iOS上禁用缩放网站，除非你制作了粗略的平台应用程序。

Answer 8

有时内容中的其他指令可能会使Apple对如何布局页面的最佳猜测搞砸你的视图，所有你需要禁用缩放缩放

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

Answer 9

这在IOS 10.3.2中运行良好

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

谢谢@arthur和@aleclarson

Answer 10

在Safari 9.0及更高版本中，您可以在viewport元标记中使用 shrink-to-fit ，如下所示

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

Answer 11

我使用以下代码在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环境中执行，则滚动行为将被破坏）。另外，请注意将passive选项设置为false。

Answer 12

我设法通过将以下内容添加到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: none;
	touch-action: manipulation;
}

Answer 13

我愚蠢地有一个包装div，其宽度以像素为单位。其他浏览器似乎足够聪明，可以解决这个问题。一旦我将宽度转换为百分比值，它在Safari移动设备上也能很好地工作。非常烦人。

.page{width: 960px;}

到

.page{width:93.75%}

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

Answer 14

为了符合WAI WCAG 2.0 AA无障碍要求，您必须永不禁用捏缩放。（WCAG 2.0：SC 1.4.4调整文本级别AA）。您可以在此处详细了解：Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile, 2.2 Zoom/Magnification

Answer 15

如前所述，该解决方案基本上可以在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;
 }

Answer 16

实际上，Apple在最新的iOS版本上禁用了user-scalable = no。我尝试作为指导，这种方式可以工作：

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

Answer 17

这个应该在iphone等上工作。

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

如何在Mobile Safari上禁用视口缩放？

17 个答案: