我正在创建一个移动网页,基本上是一个大的形式与几个文本输入。
然而(至少在我的Android手机上),每次我点击一些输入,整个页面都会放大到那里,掩盖页面的其余部分。是否有一些HTML或CSS命令禁用这种缩放移动网页?
我正在创建一个移动网页,基本上是一个大的形式与几个文本输入。
然而(至少在我的Android手机上),每次我点击一些输入,整个页面都会放大到那里,掩盖页面的其余部分。是否有一些HTML或CSS命令禁用这种缩放移动网页?
当前回答
请尝试添加此元标签和样式
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<style>
body{
touch-action: manipulation;
}
</style>
其他回答
<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>
请添加脚本以禁用捏,点击,聚焦缩放
这应该是你需要的一切:
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
你可以使用:
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
...
</head>
但是请注意,Android 4.4不再支持target-densitydpi属性。因此,对于Android 4.4及以后版本,建议采用以下最佳实践:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
似乎仅仅在index.html中添加元标签并不能阻止页面缩放。添加下面的样式会有神奇的效果。
:root {
touch-action: pan-x pan-y;
height: 100%
}
编辑: 演示:https://no-mobile-zoom.stackblitz.io
对于那些晚到派对的人来说,kgutteridge的答案对我来说不适用,Benny Neugebauer的答案包括目标密度(一个被弃用的功能)。
然而,这对我来说是有效的:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />