Html 在输入“文本”标签中禁用自动缩放 - iPhone 上的 Safari
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2989263/
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
Disable Auto Zoom in Input "Text" tag - Safari on iPhone
提问by Eduardo Montenegro
I made an HTML page that has an <input>tag with type="text". When I click on it using Safari on iPhone, the page becomes larger (auto zoom). Does anybody know how to disable this?
我制作了一个<input>带有type="text". 当我在 iPhone 上使用 Safari 单击它时，页面变大（自动缩放）。有人知道如何禁用它吗？
回答by srikanth
The browser will zoom if the font-size is less than 16pxand the default font-size for form elements is 11px(at least in Chrome and Safari).
如果字体大小小于16px并且表单元素的默认字体大小是11px（至少在 Chrome 和 Safari 中），则浏览器将缩放。
Additionally, the selectelement needs to have the focuspseudo-class attached.
此外，select元素需要附加focus伪类。
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
font-size: 16px;
}
It's not necessary to use all the above, you can just style the elements you need, eg: just text, number, and textarea:
没有必要使用以上所有内容，您可以只设置所需元素的样式，例如： just text, number, and textarea：
input[type='text'],
input[type='number'],
textarea {
font-size: 16px;
}
Alternate solution to have the input elements inherit from a parent style:
让输入元素从父样式继承的替代解决方案：
body {
font-size: 16px;
}
input[type="text"] {
font-size: inherit;
}
回答by daxmacrog
You can prevent Safari from automatically zooming in on text fields during user input withoutdisabling the user's ability to pinch zoom. Just add maximum-scale=1but leave out the user-scale attribute suggested in other answers.
您可以防止 Safari 在用户输入期间自动放大文本字段，而不会禁用用户的双指缩放功能。只需添加maximum-scale=1但省略其他答案中建议的用户规模属性。
It is a worthwhile option if you have a form in a layer that “floats” around if zoomed, which can cause important UI elements to move off screen.
如果图层中的表单在缩放时“浮动”，这可能会导致重要的 UI 元素移出屏幕，那么这是一个值得的选择。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
回答by Christina
@media screen and (-webkit-min-device-pixel-ratio:0) {
select:focus,
textarea:focus,
input:focus {
font-size: 16px;
background: #eee;
}
}
New: IOS will still zoom, unless you use 16px on the input without the focus.
新：IOS 仍然会缩放，除非你在没有焦点的输入上使用 16px。
@media screen and (-webkit-min-device-pixel-ratio:0) {
select,
textarea,
input {
font-size: 16px;
}
}
I added a background since IOS adds no background on the select.
我添加了一个背景，因为 IOS 没有在选择上添加背景。
回答by Marcellino Bommezijn
If your website is properly designed for a mobile device you could decide not allow scaling.
如果您的网站是为移动设备正确设计的，您可以决定不允许缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
This solves the problem that your mobile page or form is going to 'float' around.
这解决了您的移动页面或表单将“浮动”的问题。
回答by Nik
In summary the answer is: set the font size of the form elements to at least 16px
总之答案是：将表单元素的字体大小设置为至少 16px
回答by stormsweeper
input[type='text'],textarea {font-size:1em;}
回答by Milos Matic
Proper way to fix this issue is to change meta viewport to:
解决此问题的正确方法是将元视口更改为：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>回答by dlo
There's no clean way I could find, but here's a hack...
我找不到干净的方法，但这里有一个黑客......
1) I noticed that the mouseover event happens prior to the zoom, but the zoom happens before mousedown or focus events.
1) 我注意到 mouseover 事件发生在缩放之前，但缩放发生在 mousedown 或 focus 事件之前。
2) You can dynamically change the META viewport tag using javascript (see Enable/disable zoom on iPhone safari with Javascript?)
2) 您可以使用 javascript 动态更改 META 视口标签（请参阅使用 Javascript在 iPhone Safari 上启用/禁用缩放？）
So, try this (shown in jquery for compactness):
所以，试试这个（在 jquery 中显示为紧凑）：
$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}
This is definitely a hack... there may be situations where mouseover/down don't always catch entries/exits, but it worked well in my tests and is a solid start.
这绝对是一个黑客......可能存在鼠标悬停/向下并不总是捕获条目/退出的情况，但它在我的测试中运行良好并且是一个可靠的开始。
回答by Tuyen Cao
Add user-scalable=0to viewport meta as following
将user-scalable=0添加到视口元，如下所示
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
Worked for me :)
为我工作:)
回答by piouPiouM
I recently (today :D) had to integrate this behavior. In order to not impact the original design fields, including combo, I opted to apply the transformation at the focus of the field:
我最近（今天：D）不得不整合这种行为。为了不影响原始设计领域，包括组合，我选择在该领域的焦点上应用转换：
input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
font-size: 16px;
}
