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自动”。你可能需要，也可能不需要，但为了完整起见，我将其包括在内。

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

input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
  font-size: 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;
}

如果你的网站是为移动设备设计的，你可以决定不允许扩展。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

这解决了移动页面或表单“浮动”的问题。

令人惊讶的是，这里有很多javascript和视口的答案，只有一个提到了文本大小调整，这是我认为最好的解决方案。

您可以将此设置为无。

添加以下CSS：

* {
 -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

这在iOS Safari和Chrome上对我有效。对于输入选择器，可以将类或id设置为包含当前值。

@supports (-webkit-overflow-scrolling: touch) {
   input {
     font-size: 16px;
   }
}