16px 或更大文本阻止 iOS 表单缩放

这是 Josh W. Comeau 教给我的一个很棒的 “今天我学到”。如果 <input> 的 font-size 为 16px 或更大，iOS 上的 Safari 将正常聚焦到输入框中。但是，一旦 font-size 小于或等于 15px，视口就会缩放该输入框。大概是因为它认为这种字体太小，希望您能看到自己在做什么。因此，它会放大以帮助您。辅助功能。如果您不希望这样，请将字体放大。

🔥 将表单输入的字体大小设置为 1rem（16px）或更大，以防止 iOS Safari 在点击时自动放大。

从 UX 的角度来看，这确实有很大的不同！ pic.twitter.com/6UpicwMaWE
— Josh W. Comeau (@JoshWComeau) 2021年4月7日

这是 Josh 的精确 Pen，如果您想自己试用一下。

总的来说，我认为我喜欢这个功能。它可以帮助人们看到他们在做什么，并避免使用超小字体。有一点令人不爽的是——我并不责怪任何人——不同字体的可读性在不同大小下并不相同。例如，以下是 San Francisco 和 Caveat 在 16px 下的效果。

左侧为 San Francisco，右侧为 Cavet。即使 `font-size` 相同，Caveat 在视觉上看起来也要小得多。

您可以在此示例中的调试模式中查看，亲身体验并更改字体大小以查看哪些会缩放，哪些不会缩放。

Johan

# 2021年5月5日

我想在这方面获得更多控制权。您要么禁用所有缩放（辅助功能灾难！），要么必须处理设置 16px（这几乎没有空间显示任何复杂内容）。没有中间地带。

Luis Hernandez

# 2021年5月5日

有一种方法可以绕过这个问题，使用 transform: scale($target_font_size / 16); font-size: 16px。

它需要对标签进行一些操作，以确保整个输入仍然可点击。

Maurice

# 2021年5月10日

我也使用这种方法有一段时间了，但在几个月前放弃了它。在很多情况下，将表单控件的最小值设置为 16px 会与正文字体大小不平衡。因此，在 Google 和 Stack Overflow 的帮助下，我发现为 viewport 设置 maximum-scale=1 也可以防止缩放发生，无论表单控件的字体大小如何。我还没有发现使用此方法的任何缺点。例如，用户仍然可以放大页面。请查看此 Pen。

Maurice

评论永久链接# 2021年5月10日

糟糕，本意是粘贴调试模式链接！

Manuel

# 2021年5月11日

@Maurice，iOS 10 及更高版本忽略 maximum-scale、minimum-scale 和 ùser-scalable，因为它被滥用了。这就是它看起来有效的原因。其他设备可能无法缩放，因为它们遵守给定的规则。
所以最好再次将其删除。

Ivan

# 2021年6月1日

@Manuel 您可以将其包装在针对“移动 Safari”功能的 CSS.supports 调用中

// This prevents iOS zoom on focused form elements with font size smaller than 16px.
// iOS 10+ allows pinch-zoom even if viewport is unscalaeable.
// We feature detect those browsers and apply additional rules.
    if (
        window.CSS?.supports?.(
            '(font:-apple-system-body) and (-webkit-touch-callout:none) and (-webkit-tap-highlight-color:hotpink)'
        )
    ) {
        const viewport = document.querySelector('meta[name="viewport"]');
        if (viewport !== null) {
            viewport.content = `${viewport.content},user-scalable=no`;
        }
    }

Jeffery To

# 2021年6月4日

正如 Luis Hernandez 所提到的，有一种仅使用 CSS 的解决方案涉及 scale() 变换，它允许您使用小于 16px 的字体大小，而无需禁用页面缩放。

我有一个 StackOverflow 答案，其中概述了该技术，以及一篇更详细的博文：在 iPhone 上的 Safari 中禁用输入缩放，像素完美的方式。

Jon

# 2021年9月27日

我相信我可能刚刚找到了比已发布的更好的解决方案。我将其发布在 Stack Overflow 上……

https://stackoverflow.com/a/69353771/56007

Aymane Lassfar

# 2022年12月8日

我使用了 user-scalable=no，它可以防止 iOS 设备上的默认缩放，如下所示

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。