这三种方法我都试过了,但都无济于事:
<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" />
事实证明,问题是不标准的引号,因为我从一个网站复制了元标签,正在使用他们,哎呀
我设法通过向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:操纵;
}
如上所述,这个解决方案在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;
}