我制作了一个HTML页面，其中有一个＜input＞标记，类型为“text”。当我在iPhone上使用Safari点击它时，页面会变大（自动缩放）。有人知道如何禁用此功能吗？
当前回答
将字体大小（用于输入字段）设置为等于正文的字体大小，似乎是阻止浏览器缩小或缩小的原因。我建议使用字体大小：1rem作为更优雅的解决方案。
其他回答
如果字体大小小于16px，并且表单元素的默认字体大小为11px（至少在Chrome和Safari中），浏览器将进行缩放。
此外，select元素需要附加焦点伪类。
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;
}
不需要使用以上所有内容，您可以只设置所需元素的样式，例如：仅文本、数字和文本区域：
input[type='text'],
input[type='number'],
textarea {
font-size: 16px;
}
使输入元素从父样式继承的替代解决方案：
body {
font-size: 16px;
}
input[type="text"] {
font-size: inherit;
}
这在iOS Safari和Chrome上对我有效。对于输入选择器，可以将类或id设置为包含当前值。
@supports (-webkit-overflow-scrolling: touch) {
input {
font-size: 16px;
}
}
经过一段时间的尝试，我想出了这个解决方案
// set font-size to 16px to prevent zoom
input.addEventListener("mousedown", function (e) {
e.target.style.fontSize = "16px";
});
// change font-size back to its initial value so the design will not break
input.addEventListener("focus", function (e) {
e.target.style.fontSize = "";
});
在“mousedown”时，它将输入的字体大小设置为16px。这将阻止缩放。在焦点事件中，它将字体大小更改回初始值。
与之前发布的解决方案不同，这将允许您将输入的字体大小设置为任意大小。
input[type='text'],textarea {font-size:1em;}
我找不到干净的方法，但这里有一个黑客。。。
1） 我注意到mouseover事件发生在缩放之前，但缩放发生在mousedown或focus事件之前。
2） 您可以使用javascript动态更改META视口标记（请参阅使用javascript启用/禁用iPhone safari上的缩放？）
因此，请尝试以下操作（如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" />');
}
这绝对是一个黑客。。。在某些情况下，mouseover/down并不总是捕捉入口/出口，但它在我的测试中运行良好，是一个坚实的开始。
