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

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（设备模式）进行测试。

Demo #2 https://jsfiddle.net/infous/3hjmc9o0/3/embedded/result/ 在

中有一些文本，可以根据需要进行扩展。

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

Answer 1

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

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

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

p {
  max-height: 5000em;
}

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

Answer 2

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

.s {
    width: 100%;
}

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