智能手机的横向利润率远高于 PC答案

【问题标题】：Smartphone lateral margins much bigger than PC's智能手机的横向利润率远高于 PC
【发布时间】：2018-09-05 01:13:42
【问题描述】：

在我的网站上，我有：

.div1 {
    display:flex;
    flex-direction:column;
    align-items:center;
}
h1 {
    font-weight:normal;
    font-size:50px;
    font-family:Sans-Serif;
    margin:0.5em;
    color:#ccc;
}

.div1 是一个包含页面上所有其他元素的 div 元素。里面的第一件事是这样的标题：

<h1>B I O D I V E R S U S</h1>

在我的计算机中，当我将浏览器调整为非常窄（模拟智能手机屏幕）时，只有几个字母会移动到下一行。横向边距与底部和顶部边距一样小 (0.5 em)。

然而，在我的智能手机中，横向边距比底部和顶部边距大得多，因此所有字母都有足够的空间，但仍然有一些进入第二行（段落中的相同问题下面）。

发生了什么事？

【问题讨论】：

请分享实际结果的截图，以及您的预期结果。
@BenM 截图分享。谢谢！预期的结果是智能手机（第二张图片）变得像 PC（第一张图片）。

标签： html css margin

【解决方案1】：

要让网页在移动设备上正常运行，您需要以下元标记。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

简而言之，如果移动屏幕的宽度为 640px，页面可能会以 980px 的虚拟视口呈现，然后将其缩小以适应 640px 的空间。

要了解这是为什么，您可以阅读它here 和here。

【讨论】：