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

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


当前回答

这里有许多方法-尽管立场是,当涉及到缩放的可访问性目的时,通常不应该限制用户,但可能会出现需要缩放的情况:

以设备的宽度渲染页面,不要缩放:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

防止缩放-并防止用户能够缩放:

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

删除所有缩放

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

其他回答

这应该是你需要的一切:

<meta name="viewport" 
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

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

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

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


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

这里有许多方法-尽管立场是,当涉及到缩放的可访问性目的时,通常不应该限制用户,但可能会出现需要缩放的情况:

以设备的宽度渲染页面,不要缩放:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

防止缩放-并防止用户能够缩放:

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

删除所有缩放

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

你可以通过简单地将以下“元”元素添加到你的“头脑”中来完成任务:

<meta name="viewport" content="user-scalable=no">

添加所有属性,如'width','initial-scale', 'maximum-width', 'maximum-scale'可能不起作用。因此,只需添加上面的元素。