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

Question

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

当我使用除全宽 border-/margin-/padding-less 框以外的任何内容时，字体大小会显着减小。请参阅以下最小示例：

<!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>

这是它在我手机上的边缘显示方式 phone:

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

我猜这是 edge 中的一个错误（我使用的是 25.10586.318.0 版本）？还是出于某种奇怪的原因，这是故意的行为？
无论哪种方式，有没有办法在不必设置固定字体大小的情况下避免缩小文本？

Answer 1

在文档的头部添加这两行：

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

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

Edge on mobile device extremely reduces font-size when adding padding

html

css

mobile

microsoft-edge