相对于父框高度的字体大小答案

【问题标题】：Font size relative to parent box height相对于父框高度的字体大小
【发布时间】：2010-10-11 10:36:04
【问题描述】：

我有块级元素，其height 属性设置在% 中。这些块级元素内部是带有文本的<span>s。示例：

<body style="height: 100%;">
    <menu style="height: 10%;">
        <button style="display: block; height: 100%;">
            <span style="font-size: 4em; line-height: 200%;">text</span>
        </button>
    </menu>
</body>

这在移动浏览器上看起来相当不错，但当我旋转设备时（即，一旦body.onorientationchange 事件启动），文本变得太大。

所以我的问题是，如何指定相对于父元素高度的文本大小？

【问题讨论】：

发布您的更新作为答案并接受它。如果您自己找到了解决方案，可以接受您自己的答案 :) 我忘记了 meta 标记，但请记住 -webkit-text-size-adjust: none;，因为我已经修复了一个非常输入框上奇怪的文本大小问题:)

标签： css mobile mobile-website mobile-webkit

【解决方案1】：

我在 iPhone 上遇到过类似的问题，不是高度导致问题，而是移动 webkit 的一个选项。

尝试设置这个

body {
    -webkit-text-size-adjust: none;
}

【讨论】：

不错！但根据this link in 仅适用于 iOS 上的 Mobile Safari。默认的安卓浏览器有替代品吗？

【解决方案2】：

这将禁用旋转时的字体大小更改，这几乎解决了我的问题。借用from here。

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

更新：按照Mark 的建议从分号更改为逗号。

【讨论】：

两天后只能自己回答，记得吗？还有几个小时……
如果您在内容参数之间使用分号，您将在 Safari 上收到错误消息。如果你用逗号替换分号，它就可以正常工作。
@Mark 我已经相应地更新了答案。感谢您指出这一点，虽然到目前为止我没有注意到错误，但您对此有参考吗？
Attila，几乎在所有我看到用分号代替逗号的地方，这让我很困惑。目前，我唯一的参考是 Safari 本身（检查错误控制台）。