不用简单地将字体大小设置为16px，您可以：

设置输入字段的样式，使其大于预期大小，允许将逻辑字体大小设置为16px。使用scale（）CSS转换和负边距将输入字段缩小到正确的大小。

例如，假设输入字段最初的样式为：

input[type="text"] {
    border-radius: 5px;
    font-size: 12px;
    line-height: 20px;
    padding: 5px;
    width: 100%;
}

如果通过将所有维度增加16/12=133.33%来放大字段，然后使用scale（）将其减少12/16=75%，则输入字段将具有正确的视觉大小（和字体大小），并且焦点上不会有缩放。

由于scale（）只影响视觉大小，因此还需要添加负边距以减小字段的逻辑大小。

使用此CSS：

input[type="text"] {
    /* enlarge by 16/12 = 133.33% */
    border-radius: 6.666666667px;
    font-size: 16px;
    line-height: 26.666666667px;
    padding: 6.666666667px;
    width: 133.333333333%;

    /* scale down by 12/16 = 75% */
    transform: scale(0.75);
    transform-origin: left top;

    /* remove extra white space */
    margin-bottom: -10px;
    margin-right: -33.333333333%;
}

输入字段的逻辑字体大小为16px，而文本大小为12px。

我有一篇博客文章，在这里我将稍微详细介绍一下，并将此示例作为可查看的HTML：iPhone上Safari无输入缩放，像素完美方式

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;
}

正在iOS 7上运行的Javascript黑客。这是基于@dlo的回答，但mouseover和mouseout事件被touchstart和touchend事件替换。基本上，该脚本在再次启用缩放之前添加半秒超时，以防止缩放。

$("input[type=text], textarea").on({ 'touchstart' : function() {
    zoomDisable();
}});
$("input[type=text], textarea").on({ 'touchend' : function() {
    setTimeout(zoomEnable, 500);
}});

function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />');
} 

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

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

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

您可以将此设置为无。

添加以下CSS：

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