如果字体大小小于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;
}

受@jirikuchta的回答启发，我通过添加以下CSS解决了这个问题：

#myTextArea:active {
  font-size: 16px; /* `16px` is safer I assume, although `1rem` works too */
}

没有JS，我没有注意到任何闪光或任何东西。

值得注意的是，最大比例为1的视口也可以工作，但当页面作为iframe加载时，或者如果您有其他脚本修改视口等，则无法工作。

这个问题的简单解决方案是：

@media screen and (max-width: 599px) {
  input, select, textarea {
    font-size: 16px;
  }
}

注：最大宽度可根据您的要求定制。

我最近（今天：D）不得不整合这种行为。为了不影响原始设计字段，包括combo，我选择在字段的焦点处应用转换：

input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
  font-size: 16px;
}

2021解决方案。。。

好吧，我已经通读了所有的旧答案，但没有一个对我有用。经过几个小时的尝试，最终解决方案似乎很简单。

input{
    transform: scale(0.875);
    transform-origin: left center;
    margin-right: -14.28%;
}

在PC上的iOS/Android/Chrome上测试

这允许您使用14px字体，如果您需要不同的大小，则缩放因子为14/16=0.875，负边距为（1-0.875）/0.875*100

我的输入有一个父级设置为“display:flex”，它会增长以适应父级，因为它具有“flex:11自动”。你可能需要，也可能不需要，但为了完整起见，我将其包括在内。

这对我有用：

input, textarea {
    font-size: initial;
}