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

我看了多个答案\

在元标签中设置最大比例=1的答案在iOS设备上运行良好，但在Android设备上禁用缩放功能。设置字体大小的字体：16px；onfocus对我来说太粗糙了。

所以我编写了一个JS函数来动态更改元标记。

var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
if (iOS)
    document.head.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1, maximum-scale=1";
else
    document.head.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1";

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

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

input[type='text'],textarea {font-size:1em;}

这对我有用：

input, textarea {
    font-size: initial;
}

顺便说一下，如果您使用Bootstrap，您可以只使用此变体：

.form-control {
  font-size: 16px;
}