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

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

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

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

下面是我在一个项目中使用的黑客：

select {
    font-size: 2.6rem; // 1rem = 10px
    ...
    transform-origin: ... ...;
    transform: scale(0.5) ...;
}

最终得到了我想要的初始样式和比例，但没有缩放焦点。

我找不到干净的方法，但这里有一个黑客。。。

1） 我注意到mouseover事件发生在缩放之前，但缩放发生在mousedown或focus事件之前。

2） 您可以使用javascript动态更改META视口标记（请参阅使用javascript启用/禁用iPhone safari上的缩放？）

因此，请尝试以下操作（如jquery所示）：

$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

这绝对是一个黑客。。。在某些情况下，mouseover/down并不总是捕捉入口/出口，但它在我的测试中运行良好，是一个坚实的开始。

您可以防止Safari在用户输入期间自动放大文本字段，而不禁用用户的缩放功能。只需添加最大比例=1，但忽略其他答案中建议的用户比例属性。

如果您在图层中有一个表单，如果缩放，它会“浮动”，这会导致重要的UI元素移出屏幕，这是一个值得选择的选项。

<meta name=“viewport”content=“width=设备宽度，初始比例=1，最大比例=1”>

我看了多个答案\

在元标签中设置最大比例=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";