Question

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

<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事件开始后），文字会变得太大。

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

Answer 1

我在iPhone上遇到了类似的问题，这不是造成问题的高度，而是移动webkit的选项。

尝试设置此

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

Answer 2

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

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

更新：由分号更改为逗号，建议为Mark。

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

2 个答案: