行高在 iPhone 和 iPad 上的显示方式与在其他设备上不同

Posted 2023-03-14

【中文标题】行高在 iPhone 和 iPad 上的显示方式与在其他设备上不同

【英文标题】：line-height displaying differently on iPhone and iPad than on other devices

【发布时间】：2014-08-26 19:11:35

【问题描述】：

我遇到了文本在不同设备上显示不同的问题。我将 line-height 设置为 1.25em，它在所有桌面浏览器和 android 移动设备上都以我希望的方式显示，但它在 iPhone 和 iPad 上的显示方式不同。在 iPhone 和 iPad 上，文本看起来被压扁了。

视口标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS：

html 
    font-size: 62.5%;
    -ms-text-size-adjust: 62.5%;
    -webkit-text-size-adjust: 62.5%;


.text-16 
    font-family: Helvetica, sans-serif;
    font-size: 1.6em;
    line-height: 1.25em;

这是它在各种设备上的样子：

iPad 3：

iPhone 5：

三星 Galaxy Note II：

OS X 狮子：

关于什么可能导致这种情况的任何想法？

【问题讨论】：

我知道它们非常相似，但我总是发现 % 比 em 更加一致，IMO。也许值得一试？

【参考方案1】：

您是否尝试将 html css 的字体大小设置为 100% ？

【讨论】：

我删除了 -webkit-text-size-adjust 并保留了 font-size 并修复了它。谢谢