如何禁用移动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'值似乎是工作的

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

更新

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

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

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

当前回答

user-scalable=0

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

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

2017-02-05 19:38:32

其他回答

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

.page{width: 960px;}

.page{width:93.75%}

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

2018-05-20 15:42:09

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

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

2015-02-12 22:55:30

这在IOS 10.3.2中运行良好

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

谢谢@arthur和@aleclarson

2017-06-09 06:02:26

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

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

2022-11-10 13:57:49

如上所述，这个解决方案在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;
 }

2020-10-29 06:25:30

如何禁用移动Safari上的视口缩放?

推荐文章

最新文章

标签