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

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

@supports (-webkit-overflow-scrolling: touch) {
   input {
     font-size: 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 */

}

这对我有用：

input, textarea {
    font-size: initial;
}

这是工作！！！我完成了我的搜索旅程！

<meta name=“viewport”content=“width=640px，初始比例=.5，最大比例=.5”/>

在iPhone OS6、Android 2.3.3模拟器上测试

我有一个固定宽度为640px的移动网站，我面对的是自动变焦对焦。

我试着分配一些荡妇，但没有一个能同时在iPhone和Android上运行！

现在对我来说，禁用缩放是可以的，因为网站是移动第一设计！

这是我找到它的地方：如何调整视口大小和缩放以支持跨浏览器？

经过一段时间的尝试，我想出了这个解决方案

// 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。这将阻止缩放。在焦点事件中，它将字体大小更改回初始值。

与之前发布的解决方案不同，这将允许您将输入的字体大小设置为任意大小。