我制作了一个HTML页面，其中有一个＜input＞标记，类型为“text”。当我在iPhone上使用Safari点击它时，页面会变大（自动缩放）。有人知道如何禁用此功能吗？
当前回答
伪元素如：focus不再像以前那样工作。从iOS 11，可以在主样式之前添加一个简单的重置声明（前提是不要用较小的字体大小覆盖它们）。
/* Prevent zoom */
select, input, textarea {
font-size: 16px;
}
值得一提的是，对于Tachyons.CSS这样的CSS库，很容易意外覆盖字体大小。
例如，class:f5相当于：fontSize:1rem，如果您将主体字体比例保持为默认值，则可以使用。
但是：如果您选择字体大小class：f6，则在向上的小屏幕上，这将相当于fontSize:.875rem。在这种情况下，您需要更具体地说明重置声明：
/* Prevent zoom */
select, input, textarea {
font-size: 16px!important;
}
@media screen and (min-width: 30em) {
/* not small */
}
其他回答
这个问题的简单解决方案是：
@media screen and (max-width: 599px) {
input, select, textarea {
font-size: 16px;
}
}
注：最大宽度可根据您的要求定制。
@media screen and (-webkit-min-device-pixel-ratio:0) {
select:focus,
textarea:focus,
input:focus {
font-size: 16px;
background: #eee;
}
}
新功能：IOS仍然会缩放，除非你在没有焦点的输入上使用16px。
@media screen and (-webkit-min-device-pixel-ratio:0) {
select,
textarea,
input {
font-size: 16px;
}
}
我添加了背景，因为IOS没有在选择上添加背景。
将用户scalable=0添加到视区元，如下所示
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
为我工作：）
请不要使用Javascript或黑客来使其工作。这将影响您在网络上的项目分数。
这将起到作用：
input, input:active, input:focus, input:focus-within, input:hover, input:visited {
font-size: 16px!important;
}
我用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的字体大小破坏了设计，则可能需要调整界面中的其他一些元素。
