为什么字体对于非响应式网站来说很大？

Question

我觉得为什么在小屏幕上为什么字体大小对于没有响应的网站（没有<meta name="viewport" content="width=device-width, initial-scale=1.0">标签）来说很大？我希望它更小，并能够放大。

HTML（只有两列带有一些文字）：

<div class="s">
    <div>
        <h2>...</h2>
        <p>..</p>
    </div>
    <div>
        <h2>...</h2>
        <p>...</p>
    </div>
</div>

CSS：

body {
    font: 100%/1.5 Tahoma, Geneva, sans-serif;
}

.s {
    display: flex;
    margin: 50px auto;
    width: 1000px;
}

.s div {
    background: #eee;
    flex: 1 1 100%;
}

演示在这里https://jsfiddle.net/infous/3hjmc9o0/embedded/result/。您可以使用Chrome中的F12，Ctrl + Shift + M（设备模式）进行测试。

演示＃2 https://jsfiddle.net/infous/3hjmc9o0/3/embedded/result/，其中包含＆lt; body＆gt;中的一些文字这是我可以扩展的。

我希望所有文字都像图片上方的红色边框一样。

Answer 1

嗯，这种效果的原因是因为“移动文本大小调整”算法，详细信息在https://drafts.csswg.org/css-size-adjust/。如果您不使用响应模式，浏览器会尝试调整段落，标题等文本。

理论上，有text-size-adjust CSS规则来控制行为，但它在浏览器中不起作用。

幸运的是，somebody发现了这个黑客/解决方法：

p {
  max-height: 5000em;
}

我认为此max-height会禁用“移动文字大小调整”算法。在这个例子中，你将缩小所有段落。

Answer 2

您修复了width: 1000px，这就是为什么浏览器在div中设置文字更大的原因。浏览器必须包含相同宽度的所有文本，以及它使font-size更大的原因。如果你设置width: 100%，一切都会正常工作！

＆＃13;

＆＃13;

.s {
    width: 100%;
}

＆＃13;

<div class="s">
    <div>
        <h2>Test one</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat ex quis perspiciatis commodi reiciendis tempore autem vel provident alias cupiditate accusamus dolores hic aperiam, blanditiis quia animi, suscipit sunt mollitia.</p>
        Text without &lt;p&gt;
    </div>
    <div>
        <h2>Test two</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat ex quis perspiciatis commodi reiciendis tempore autem vel provident alias cupiditate accusamus dolores hic aperiam, blanditiis quia animi, suscipit sunt mollitia.</p>
        Text without &lt;p&gt;
    </div>
</div>

Text in body.

＆＃13;

＆＃13;

＆＃13;