我制作了一个HTML页面，其中有一个＜input＞标记，类型为“text”。当我在iPhone上使用Safari点击它时，页面会变大（自动缩放）。有人知道如何禁用此功能吗？
当前回答
如果字体大小小于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;
}
其他回答
input[type='text'],textarea {font-size:1em;}
总之，答案是：将表单元素的字体大小设置为至少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。这将阻止缩放。在焦点事件中，它将字体大小更改回初始值。
与之前发布的解决方案不同，这将允许您将输入的字体大小设置为任意大小。
伪元素如：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 */
}
一条关于将字体大小设置为16px的顶级答案的评论询问了这是如何解决的，如果你想要更大/更小的字体怎么办。
我不知道你们所有人的情况，但使用px来调整字体大小并不是最好的方法，你应该使用它们。
我在我的响应网站上遇到了这个问题，我的文本字段大于16像素。我的表单容器设置为2em，输入字段设置为1.4em。在移动查询中，我根据视口更改html字体大小。由于默认的html是10，我的输入字段在桌面上计算为28px
为了取消自动缩放，我不得不将输入更改为1.6em。这将我的字体大小增加到32px。只是稍微高一点，几乎看不到。在我的iPhone 4和5上，我将html字体大小改为15像素（纵向），改回10像素（横向）。看起来像素大小的最佳点是48px，这就是为什么我从1.4em（42px）改为1.6em（48px）。
你需要做的事情是找到字体大小的最佳位置，然后将其转换为rem/em大小。
