it-swarm.asia

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

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

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

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

_ update _

从Apple的网站得到这个,它的工作原理:

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

原来问题是非标准引号,因为我从使用它们的网站复制了元标记,哎呀

339
MetaGuru

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

这适用于iOS 4.2中的Mobile Safari。

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

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

从发行说明

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

据我所知,我们很幸运。

141
Mattis

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

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

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

 document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
      event.preventDefault();
    }
  }, false);
15
Arthur
user-scalable=0

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

除非你制作大平台应用程序,否则你现在无法在iOS上禁用缩放网站。

9
angry kiwi

尝试将以下内容添加到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
}
9
Lorenz Lo Sauer

有时候内容中的其他指令可能会让你对苹果公司对页面布局的最佳猜测搞砸你的观点,你只需要禁用捏缩放即可

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

这在IOS 10.3.2中工作正常

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

谢谢@arthur和@aleclarson

4
Nikhil Gowda

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

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

我设法通过将以下内容添加到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;
}
1
imelgrat

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

.page{width: 960px;}

.page{width:93.75%}

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

为了符合WAI WCAG 2.0 AA无障碍要求,您必须 永远不要禁用 捏缩放。 (WCAG 2.0:SC 1.4.4调整文本级别AA)。您可以在此处阅读更多相关信息: 移动辅助功能:WCAG 2.0和其他W3C/WAI指南如何应用于移动设备,2.2缩放/放大

0
haltersweb