Html 如何在移动网页上“禁用”缩放？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4472891/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I "disable" zoom on a mobile web page?
提问by Martín Fixman
I am creating a mobile web page that is basically a big form with several text inputs.
我正在创建一个移动网页，它基本上是一个带有多个文本输入的大表单。
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 命令可以在移动网页上禁用这种缩放？
回答by kgutteridge
This should be everything you need
这应该是你需要的一切
<meta
name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
/>
回答by Luke Keller
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" />
回答by SW4
There are a number of approaches here- and though the position is that typically users should not be restrictedwhen 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" />
回答by Benny Neugebauer
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.4the property target-densitydpi is no longer supported. So for Android 4.4 and later the following is suggested as best practice:
但请注意，Android 4.4不再支持属性target-densitydpi。因此，对于 Android 4.4 及更高版本，建议将以下内容作为最佳实践：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
回答by Azamat Rasulov
Since there is still no solution for initial issue, here's my pure CSS two cents.
由于最初的问题仍然没有解决方案，这是我的纯 CSS 两分钱。
Mobile browsers (most of them) require font-size in inputs to be 16px. So
移动浏览器（大多数）要求输入中的字体大小为 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 your 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;
}
}回答by Sarath Ak
please try adding this meta-tag and style
请尝试添加此元标记和样式
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<style>
body{
touch-action: manipulation;
}
</style>
回答by Api
Seems like just adding meta tags to index.html doesn't prevent page from zooming. Adding below style will do the magic.
似乎只是向 index.html 添加元标记并不能阻止页面缩放。添加以下样式将发挥魔力。
:root {
touch-action: pan-x pan-y;
height: 100%
}
EDIT: Demo: https://no-mobile-zoom.stackblitz.io
回答by denkquer
Possible Solution for Web Apps: While zooming can not be disabled in iOS Safari anymore, it will be disabled when opening the site from a home screen shortcut.
Web 应用程序的可能解决方案：虽然无法再在 iOS Safari 中禁用缩放，但从主屏幕快捷方式打开站点时，它将被禁用。
Add these meta tags to declare your App as "Web App capable":
添加这些元标记以将您的应用程序声明为“支持 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' />
However onlyuse this feature if your app is self sustaining, as the forward/backward buttons and URL bar aswell as the sharing options are disabled. (You can still swipe left and right though) This approach however enables quite the app like ux. The fullscreen browser only starts when the site is loaded from the homescreen. I also only got it to work after I included an apple-touch-icon-180x180.png in my root folder.
但是，只有在您的应用程序是自我维持的情况下才使用此功能，因为前进/后退按钮和 URL 栏以及共享选项被禁用。（虽然你仍然可以左右滑动）但是这种方法可以启用类似 ux 的应用程序。全屏浏览器仅在从主屏幕加载站点时启动。我也只有在我的根文件夹中包含一个 apple-touch-icon-180x180.png 后才能让它工作。
As a bonus, you probably also want to include a variant of this aswell:
作为奖励，您可能还希望包含此变体：
<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>
回答by Kasumi Gunasekara
You can accomplish the task by simply adding the following 'meta' element into your 'head':
您只需将以下 'meta' 元素添加到您的 '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' 可能不起作用。因此，只需添加上述元素。
回答by Prem
<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>
Please Add the Script to Disable pinch, tap, focus Zoom
请添加脚本以禁用捏合、点击、聚焦缩放
