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

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

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

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

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

正在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" />');
} 

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

由于iPhone上的自动放大（没有缩小）功能仍在运行，这里有一个基于dlo建议的JavaScript，用于聚焦/模糊。

一旦文本输入被功能化并在输入离开时重新合成，缩放将被禁用。

注意：有些用户可能不欣赏在小文本输入中编辑文本！因此，我个人更喜欢在编辑过程中更改输入的文本大小（参见下面的代码）。

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function onBeforeZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "user-scalable=0";
    }
}
function onAfterZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "width=device-width, user-scalable=1";
    }
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>

以下代码将在元素具有焦点期间将输入的文本大小更改为16像素（即，以当前缩放大小计算）。因此，iPhone不会自动放大。

注：缩放因子是根据window.innerWidth和iPhone的320像素显示屏计算的。这仅对处于肖像模式的iPhone有效。

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function getSender(evt, local) {
    if (!evt) {
        evt = window.event;
    }
    var sender;
    if (evt.srcElement) {
        sender = evt.srcElement;
    } else {
        sender = local;
    }
    return sender;
}
function onBeforeZoom(evt) {
    var zoom = 320 / window.innerWidth;
    var element = getSender(evt);
    element.style.fontSize = Math.ceil(16 / zoom) + "px";
}
function onAfterZoom(evt) {
    var element = getSender(evt);
    element.style.fontSize = "";
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>

即使有了这些答案，我也花了三天的时间才弄清楚到底发生了什么，我可能在未来再次需要解决方案。

我的情况与所描述的略有不同。

我在页面的一个div中有一些内容可编辑的文本。当用户单击一个不同的div（一个排序按钮）时，我自动选择了contenteditable div中的一些文本（之前已保存并清除的选择范围），对该选择运行一个富文本execCommand，然后再次清除。

这使我能够根据用户与页面上其他地方的颜色分隔符的交互无形地更改文本颜色，同时保持选择的正常隐藏状态，让他们在适当的上下文中看到颜色。

好吧，在iPad的Safari上，单击颜色分区会导致屏幕上的键盘出现，我所做的一切都不会阻止它。

我终于弄明白iPad是如何做到这一点的。

它监听触发可编辑文本选择的触摸开始和触摸结束序列。

当这种组合发生时，它会显示屏幕键盘。

实际上，它在放大可编辑文本的同时展开基础页面。我花了一天时间才明白我看到了什么。

因此，我使用的解决方案是拦截这些特定颜色div上的touchstart和touchend。在这两个处理程序中，我停止传播和冒泡，并返回false。但在touchend事件中，我触发的行为与单击触发的行为相同。

所以，在之前，Safari触发了我认为是“touchstart”、“mousedown”、“touchend”、“mouseup”、“click”的操作，因为我的代码，一个文本选择，按照这个顺序。

由于拦截而产生的新序列只是文本选择。在Safari处理和执行键盘操作之前，其他所有内容都会被拦截。touchstart和touchend拦截也防止触发鼠标事件，在上下文中这是完全正常的。

我不知道更简单的方法来描述这一点，但我认为这里有它很重要，因为我在第一次遇到这个问题的一小时内就找到了这个线索。

我有98%的把握，同样的修复方法也适用于输入框和其他任何东西。拦截触摸事件并单独处理它们，而不让它们传播或冒泡，并考虑在微小超时后进行任何选择，以确保Safari不会将该序列识别为键盘触发器。