Question

我正在尝试针对移动设备优化网站，并在Windows 10移动版的Edge中偶然发现了这个奇怪的问题：

当我使用除全边框边框/边距/无填充框以外的任何内容时，字体大小会大大减少。请参阅以下最小示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Edge Test</title>
</head>
<body>
    <div>
        <h1>Without padding</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
        rebum.</p>
    </div>

    <div style="padding: 1em">
        <h1>With padding</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
        rebum.</p>
    </div>
</body>
</html>

这就是我在手机上的边缘看法：

如果我设置边距或边框而不是填充或将宽度设置为100%或auto以外的任何其他值，则会发生同样的情况。

我想这是一个边缘的错误（我使用的是版本25.10586.318.0）？或者是出于某种奇怪的原因预期的行为？
无论哪种方式，有没有办法避免文本缩减，而不必设置固定的字体大小？

Answer 1

在文档的head部分添加以下两行：

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

添加填充时，移动设备上的边缘会极大地减小字体大小

1 个答案: