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

I am creating a mobile web page that is basically a big form with several text inputs.

我正在创建一个移动web页面，它基本上是一个包含多个文本输入的大型表单。

However (at least on my Android cellphone), every time I click on some input the whole page zooms there, obscuring the rest of the page. Is there some HTML or CSS command to disable this kind of zoom on moble web pages?

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

7 个解决方案

#1

340

This should be everything you need

这应该是你所需要的一切。

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

#2

137

For those of you late to the party, kgutteridge's answer doesn't work for me and Benny Neugebauer's answer includes target-densitydpi (a feature that is being deprecated).

对于那些迟到的人来说，kgutteridge的回答对我不起作用，而Benny Neugebauer的回答也包括了target-densitydpi(一个正在被否定的功能)。

This however does work for me:

但这对我来说确实有效:

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

#3

There are a number of approaches here- and though the position is that typically users should not be restricted when it comes to zooming for accessibility purposes, there may be incidences where is it required:

这里有很多方法——尽管在为易访问性而缩放时用户通常不应受到限制，但在需要缩放的地方可能会有以下情况:

Render the page at the width of the device, dont scale:

在设备宽度上显示页面，不要缩放:

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

Prevent scaling- and prevent the user from being able to zoom:

防止缩放-防止用户可以缩放:

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

Removing all zooming, all scaling

删除所有缩放，所有缩放

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

#4

You can use:

您可以使用:

<head>
  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
  ...
</head>

But please note that with Android 4.4 the property target-densitydpi is no longer supported. So for Android 4.4 and later the following is suggested as best practice:

但是请注意，Android 4.4不再支持目标-densitydpi属性。因此，对于Android 4.4以及之后的版本，我们建议以下几点作为最佳实践:

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

#5

Since there is still no solution for initial issue, here's my two cents.

因为现在还没有解决方案，这是我的两美分。

Mobile Safari requires font-size in inputs to be 16px. So

Mobile Safari要求输入的字体大小为16px。所以

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

solves the issue. So you don't need to disable zoom and loose accessibility features of you site.

解决了这个问题。因此，您不需要禁用缩放和松散的可访问性特性的网站。

If you base font-size is not 16px or not 16px on mobiles, you can use media queries.

如果你在手机上设置字体大小不是16px或16px，你可以使用媒体查询。

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

#6

You can accomplish the task by simply adding the following 'meta' element into your 'head':

你可以通过在你的“头脑”中添加以下“元”元素来完成这个任务:

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

Adding all the attributes like 'width','initial-scale', 'maximum-width', 'maximum-scale' might not work. Therefore, just add the above element.

添加“width”、“initial-scale”、“maximum-width”、“maximum-scale”等所有属性可能都不行。因此，只需添加上面的元素。

#7

some device viewport meta tag will not work .i this case you can add this script

某些设备viewport meta标记将不起作用。在这种情况下，您可以添加这个脚本

$(document).on('touchmove', false);

eg:

例如:

</head>
<body>
<script>$(document).on('touchmove', false);</script>
</body>

#1

340