在iPhone上的Safari浏览器中禁用“文本”标签的自动缩放

这个问题的简单解决方案是：

@media screen and (max-width: 599px) {
  input, select, textarea {
    font-size: 16px;
  }
}

注意: max-width 可根据您的要求进行自定义。

基于Stephen Walsh的回答...这段代码可以在不改变输入焦点时的字体大小（看起来很糟糕）的情况下正常工作，而且它仍然可以与FastClick一起使用，我建议将其添加到所有移动站点中以帮助提高响应速度。根据您的需要调整“视口宽度”。

// disable autozoom when input is focused
    var $viewportMeta = $('head > meta[name="viewport"]');
    $('input, select, textarea').bind('touchend', function(event) {
        $viewportMeta.attr('content', 'width=640, user-scalable=0');
        setTimeout(function(){ $viewportMeta.attr('content', 'width=640, user-scalable=1'); }, 1)
    });

将输入字段的字体大小设置为与页面正文相同的字体大小，似乎可以防止浏览器缩小或放大页面。 我建议使用font-size: 1rem作为更优雅的解决方案。

由于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>

这是我在一个项目中使用的一个技巧：

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

最终得到了我想要的初始样式和比例，但无法在焦点上进行缩放。

我花了一些时间才找到它，但这是我找到的最好的代码......http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/

var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' +        (event.type == 'blur' ? 10 : 1));
});

关于将字体大小设置为16像素的顶部答案的评论问如何解决，如果您想要更大/更小的字体。

我不知道你们怎么看，但使用像素作为字体大小并不是最好的选择，应该使用em。

在我的响应式网站上，我的文本字段比16像素大。我将表单容器设置为2rem，将输入字段设置为1.4em。在我的移动查询中，我根据视口更改html字体大小。由于默认的html是10，因此我的输入字段在桌面上计算为28px

为了消除自动缩放，我必须将我的输入更改为1.6em。这将我的字体大小增加到32px。略高且几乎不可见。在我的iPhone 4&5上，我将我的html字体大小更改为15px以进行纵向，并在横向上更改回10px。似乎那个像素大小的最佳点是48px，这就是为什么我从1.4em（42px）更改为1.6em（48px）的原因。

您需要做的事情是找到字体大小的最佳点，然后将其转换回您的rem / em大小。

最近在使用Bootstrap 5.3时遇到了一个问题，即包含`.input-group-sm`和`.form-control`的情况。我通过以下纯CSS的解决方法解决了这个问题（没有使用视口或脚本的hack）...

input, textarea {
    font-size: 1rem !important;
}
@media (min-width: 768px) {
    input, textarea {
        font-size: inherit !important;
    }
}

那样的话，字体应该足够大，以避免在小设备上自动缩放。根据需要增加最小宽度媒体断点以适应平板电脑（没有可供测试的）。

请不要使用JavaScript或黑客技术来使其工作。这将影响您在网络上的项目得分。 以下方法可以解决问题：

input, input:active, input:focus, input:focus-within, input:hover, input:visited {
    font-size: 16px!important;
}

终于成功了！！！ 我完成了我的搜索之旅！

<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />

在iPhone OS6和Android 2.3.3模拟器上测试过。

我有一个固定宽度为640像素的移动网站，我一直面临着自动缩放的问题。

我尝试了很多解决方案，但没有一个能在iPhone和Android上都起作用！

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

这就是我找到它的地方： 如何进行视口大小和缩放以实现跨浏览器支持？