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

html HTML

阿飞卡卡西

2020-03-23

I've tried all three of these to no avail:

<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;” />

each are different values I found recommended by google searching or SO searching, but none of the 'user-scalable=X' values seem to be working

I also tried comma delimiting the values instead of semicolon, no luck. Then I tried ONLY having the user-scalable value present, still no luck.


UPDATE

Got this from Apple's site and it works:

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

it turns out that the problem was the non-standard quotes because I had copied the meta tag from a website that was using them, whoops

第2805篇《如何在Mobile Safari上禁用视口缩放?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

10个回答
樱达蒙 2020.03.23

这个应该可以在iphone等上使用。

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

为了符合WAI WCAG 2.0 AA的可访问性要求,您绝不能禁用收缩缩放。(WCAG 2.0:SC 1.4.4调整AA级文本的大小)。您可以在此处阅读有关此内容的更多信息: 移动辅助功能:WCAG 2.0和其他W3C / WAI准则如何应用于移动,2.2缩放/放大

村村 2020.03.23

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

神无 2020.03.23

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

.page{width: 960px;}

.page{width:93.75%}

<div id="divPage" class="page">
</div>
达蒙 2020.03.23

在Safari 9.0及更高版本中,您可以在视口meta标签中使用“ 缩小以适合”,如下所示

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
Gil伽罗小宇宙 2020.03.23

有时,content标记中的其他指令会弄乱Apple关于如何布局页面的最佳猜测/启发式,您只需禁用捏缩放即可。

<meta name="viewport" content="user-scalable=no" />
宝儿伽罗 2020.03.23

尝试将以下内容添加到您的标签中:

<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
}
宝儿理查德 2020.03.23

您的代码将属性双引号显示为花式双引号。如果您的实际源代码中包含花哨的引号,我想可能是问题所在。

这对我适用于iOS 4.2中的Mobile Safari。

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

此功能不再适用于iOS10。Apple删除了该功能。

除非您制作总平台应用,否则您无法立即在iOS上禁用缩放网站。

LGil 2020.03.23

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

从发行说明

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

据我了解,我们很不走运。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android