0

我无法理解 Android 浏览器在缩放文本方面的行为。这是我的 HTML 代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=600">
<title>TestBug</title>
<style type="text/css">
    html, body {
        font-size:16px;
        font-family: Arial, sans-serif;
    }
    p {
        width:600px;
        margin:0 auto;
        height:200px;
        background-color:#bbeabb;
        font-size:16px;
    }
</style>
</head>
<body>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
    sint occaecat cupidatat non proident, sunt in culpa qui officia
    deserunt mollit anim id est laborum.
    </p>
</body>
</html>

问题是这里有一个固定高度的 p 元素。此 p 中的文本也具有定义为 16 像素的字体大小。有一张它在桌面上的样子：

具有固定 200px 高度的段落，在桌面浏览器中显示

当我在 Android 浏览器中查看同一页面时，我希望看到与桌面浏览器中完全相同的页面（带有绿色背景的段落和其中的文本不会溢出），即预期的行为是 Android 浏览器必须保持比例，所以内部文本大约占段落高度的一半。但相反，下一个正在发生：

具有固定 200px 高度的段落，在 android 浏览器中显示

如您所见，虽然段落的高度和宽度是根据宽度为 600 px 的 viewport-metatag 的使用进行缩放的，但文本的高度并未相应地缩放。

不过，当我使用“em”单位时，一切都很好。

有人可以解释一下这里发生了什么吗？

4

1 回答 1

0

'text-size'-setting 在浏览器首选项中设置为'large'。这就是为什么最好总是在页面测量中使用 em

于 2012-04-24T16:01:50.593 回答