我制作了一个HTML页面，其中有一个＜input＞标记，类型为“text”。当我在iPhone上使用Safari点击它时，页面会变大（自动缩放）。有人知道如何禁用此功能吗？
当前回答
我用jQuery也做到了这一点：
$('input[type=search]').on('focus', function(){
// replace CSS font-size with 16px to disable auto zoom on iOS
$(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
// put back the CSS font-size
$(this).css('font-size', $(this).data('fontSize'));
});
当然，如果16px的字体大小破坏了设计，则可能需要调整界面中的其他一些元素。
其他回答
如果字体大小小于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;
}
顺便说一下，如果您使用Bootstrap，您可以只使用此变体：
.form-control {
font-size: 16px;
}
令人惊讶的是，这里有很多javascript和视口的答案，只有一个提到了文本大小调整，这是我认为最好的解决方案。
您可以将此设置为无。
添加以下CSS：
* {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
这在iOS Safari和Chrome上对我有效。对于输入选择器，可以将类或id设置为包含当前值。
@supports (-webkit-overflow-scrolling: touch) {
input {
font-size: 16px;
}
}
总之，答案是：将表单元素的字体大小设置为至少16px
