16px 或更大的字体大小可以避免 iOS 的表单缩放问题

PassionPenguin @ 绿色有机无公害

“今天我已经学到的” —— 我从乔什·科莫(Josh W. Comeau)的推特中学习到 的东西真的是太棒了!!!如果 <input>font-size 被设定为 16px 或更大,那么 iOS 上的 Safari 将正常聚焦到输入表单中。但是,一旦 font-size 等于或小于 15px,视图窗口就会放大并聚焦到该 <input>(或许是因为苹果认为字体太小,因此它会放大以帮助你更清楚地看到自己在做什么)。这个设计是用来增强可访问性的,如果你不想要,请确保 <input> 的字体足够大。

如果你想自己试试,请打开乔什的 codepen

总的来说,我还挺喜欢这个功能。它可以帮助人们了解自己在做什么,并且也表了态 —— 苹果不建议开发者在 UI 中使用过小的字体。让人略感遗憾的是(我在这里并没责怪任何人),在不同字体大小的可读性上,并非所有字体都是一样的。比如说,下图是字体大小为 16px 的 San FranciscoCaveat 的对比:

左边是 San Francisco,右边是 Caveat。即使 font-size 相同,Caveat 在外观上看起来也要小得多。

你可以在 Safari 浏览器中打开调试模式 ,查看该示例,并更改字体大小以查看会自动放大聚焦与不会放大聚焦的具体表现。


🔥 将表单输入设置为 1rem(16px)或更大的字体,以防止在点击时 iOS Safari 浏览器自动放大并聚焦到 input 元素上。

从用户体验的角度来看有很大的不同!

—— Josh W. Comeau @JoshWComeau 9:07, Apr 7, 2021


当 Safari 放大时,它似乎希望让该 input 控件的实际字体大小为 16px。在下面两张图中,用户在输入文本时看到的字体大小其实都是 16px。因此更改后,输入文本的阅读体验实际上并没有变得更差!!

另外,人们始终可以根据需要手动放大。

—— Josh W. Comeau @JoshWComeau 9:07, Apr 7, 2021

如果发现译文存在错误或其他需要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。


掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 AndroidiOS前端后端区块链产品设计人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划官方微博知乎专栏

文章分类
前端