我如何“禁用”缩放移动网页?

我正在创建一个移动网页，基本上是一个大的形式与几个文本输入。

然而(至少在我的Android手机上)，每次我点击一些输入，整个页面都会放大到那里，掩盖页面的其余部分。是否有一些HTML或CSS命令禁用这种缩放移动网页?

当前回答

<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

请添加脚本以禁用捏，点击，聚焦缩放

2020-04-12 05:15:15

其他回答

这应该是你需要的一切:

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

2010-12-17 17:02:44

这可能会对某些人有所帮助:在iOS上，我的问题通过将<button>s交换为<div>s以及其他提到的事情来解决。

2021-11-11 06:41:18

你可以使用:

<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" />

2012-08-22 12:10:26

请尝试添加此元标签和样式

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


<style>
body{
        touch-action: manipulation;
    }
</style>

2018-10-07 05:49:17

<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

请添加脚本以禁用捏，点击，聚焦缩放

2020-04-12 05:15:15

我如何“禁用”缩放移动网页?

推荐文章

最新文章

标签