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

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

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

当前回答

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

2021-11-11 06:41:18

其他回答

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

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

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

2014-11-25 12:45:42

Web应用可能的解决方案:虽然缩放在iOS Safari中不能再被禁用，当从主屏幕快捷方式打开网站时，它将被禁用。

添加这些元标签来声明你的应用是“Web App capable”:

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" >
    <meta name="apple-mobile-web-app-capable" content="yes" >

但是，只有当你的应用程序是自我维持的时候才使用这个功能，因为前进/后退按钮和URL栏以及共享选项都是禁用的。(你仍然可以左右滑动)然而，这种方法可以实现相当的应用程序的用户体验。全屏浏览器只有在网站从主屏幕加载时才会启动。我在根文件夹中加入了apple-touch-icon-180x180.png文件后，它才开始工作。

作为奖励，你可能还想包括这个的一个变体:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

2019-07-14 00:30:22

你可以使用:

<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 name="viewport" content="user-scalable=no">

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

2017-11-09 04:08:33

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

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

2020-04-12 05:15:15

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

推荐文章

最新文章

标签