Question

我无法理解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中的文本也将font-size定义为16 px。有一个关于它在桌面上的外观的图像：

the paragraph with fixed 200px height, as it appears in desktop browser

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

the paragraph with fixed 200px height, as it appears in android browser

如您所见，虽然段落的高度和宽度是根据viewport-metatag的用法缩放的，宽度为600像素，但文本的高度未相应缩放。

当我使用'em'单位时，一切都很好。

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

Answer 1

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

Android浏览器中不成比例的字体大小调整（SDK模拟器）

1 个答案: