如何“禁用”移动网页的缩放？

316

我正在创建一个移动网页，基本上是一个大型表单，带有多个文本输入。

但是（至少在我的Android手机上），每次我单击某些输入时，整个页面都会在此处放大，从而遮盖了页面的其余部分。是否有一些HTML或CSS命令来禁用这种在网页上缩放的功能？

html css mobile

3

正如Greg上文所述，如果我进入禁用缩放功能的移动网站，通常我要做的第一件事就是点击“后退”按钮（除非这是我真正必须查看的内容），而且我确定我不是唯一的一个。而且，从我的经验来看，大多数禁用缩放的网站也使用小字体，因此使阅读文本变得非常困难且非常不舒服。

— tomasz86

8

我同意不应在大多数网站上将其禁用，但是在某些用例中，您可能需要禁用默认缩放功能-例如，在移动网络游戏中，您可能需要覆盖缩放功能来执行其他操作。

— 路加福音2014年

11

您不需要 -如果用户要缩放，那就让他们这样做。此外：Chrome浏览器可以忽略您的请求。

— 马丁

2

对于Android Firefox用户，有“ 始终缩放Firefox”加载项。强烈推荐。

— Colin D Bennett'3

2

从iOS 10开始，将user-scalable=no被忽略。看到这个

— Raptor

443

这应该是您需要的一切

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

— utter
source

23

这也将禁用用户的总体缩放能力，以及浏览器的自动调整页面适合视口的方式的能力-Martin所寻找的只是禁用“输入时放大”的一种方法行为。

— matt lohkamp 2011年

3

现在，Posterous的某人做到了这一点，而该字体的字体为12px，因此它不可读，我无法找到解决方法。

— Emil Ivanov

41

每个视障人士，包括我自己，都比任何人都更讨厌这个。我必须截取执行此操作的页面的屏幕抓取，然后在图片查看器中放大它们。

— 杰克·马尔凯蒂

6

第二个meta标签有什么作用？是不是width=device-width已经在第一个meta标签中了？

— 路加福音

1

这似乎在iOS 7上不起作用。请参见lukad03答案

— davivid 2014年

159

对于参加晚会的人来说，kgutteridge的答案对我不起作用，Benny Neugebauer的答案包括target-densitydpi（已弃用的功能）。

但是，这确实对我有用：

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

— 卢克·凯勒
source

7

现在，这是正确的答案。其他答案不再起作用（至少适用于iOS 7）。

— KyleFarris 2014年

7

有人在iOS 10.x上尝试过此操作，但我认为它不起作用吗？

— JMac

对我不起作用。它使用滚动条和不良的缩放来调整整个屏幕的大小。

— Cocorico

1

由于Apple的SFB问题，仍无法在Safari / iOS 11上运行。

— 15ee8f99-57ff-4f92-890c-b56153 '18

52

这里有很多方法-尽管位置通常是为了可访问性而缩放时不应该限制用户，但是可能会发生一些需要的地方：

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

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

— SW4
source

“通常不应该限制用户”，但是在开发用于移动设备的Web应用程序时，您常常不得不处理“输入焦点放大”的问题。我发现在这种情况下禁用缩放很有帮助。

— Le'nton

@ Le'nton禁用整个页面的缩放不是处理输入焦点上的放大的好方法。至少在iOS上，可以通过增加输入的字体大小来禁用输入焦点缩放。

— pfg

39

您可以使用：

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

— 本尼·纽格鲍尔
source

35

由于仍然没有解决最初问题的方法，因此这是我的纯CSS 2美分。

移动浏览器（大多数）要求输入中的字体大小为16px。所以

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-size: 16px;
}

展开摘要

解决了这个问题。因此，您无需禁用站点的缩放和宽松的辅助功能。

如果您的基本字体大小不是16像素，或者在手机上不是16像素，则可以使用媒体查询。

@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    font-size: 16px;
  }
}

展开摘要

— 阿扎玛特·拉苏洛夫（Azamat Rasulov）
source

2

为什么此解决方案的选票太少？到目前为止，这是避免表单单击缩放的最佳方法。

— KlausCPH

1

是; 这也解决了我的问题！我不想完全禁用缩放功能，而这正是我所需要的。

— brendan '18

1

您还可以为font-size: 1rem整个页面进行设置，因此字体可以很好地缩放，同时避免了“缩放时聚焦”问题。

— itachi

12

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

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


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

— 萨拉斯·阿克
source

1

不应该touch-action被设定为none- developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Values

— rahulroy9202

@ rahulroy9202对我来说touch-action: manipulation;很好。touch-action: none;没有做任何事情

— Umair

7

似乎仅将meta标签添加到index.html并不会阻止页面缩放。添加以下样式将起到神奇作用。

:root {
  touch-action: pan-x pan-y;
  height: 100% 
}

编辑：演示：https : //no-mobile-zoom.stackblitz.io

— 阿皮
source

2

这应该是可以接受的修复，也可以在移动Safari ios13 atm上工作

— Magico

可以正常使用移动设备，谢谢！在这里检查proyecto26.com/animatable-component

— jdnichollsc

6

Web应用程序的可能解决方案：虽然无法再在iOS Safari中禁用缩放功能，但从主屏幕快捷方式打开网站时将禁用缩放功能。

添加以下元标记以将您的应用声明为“具有Web应用功能”：

    <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栏以及共享选项被禁用。（尽管您仍然可以左右滑动），但是这种方法可以启用ux之类的应用。全屏浏览器仅在从主屏幕加载网站时启动。~~我还只有在我的根文件夹中包含apple-touch-icon-180x180.png后才能使用它。~~

作为奖励，您可能还希望包括以下变体：

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

— 登克
source

1

您只需在“ head”中添加以下“ meta”元素即可完成任务：

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

添加所有属性，例如“宽度”，“初始比例”，“最大宽度”，“最大比例”可能不起作用。因此，只需添加以上元素。

— 霞濑霞
source

-1

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

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

— Prem
source