智能手机的侧边距要比PC大

Question

在我的网站上，我有：

.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）一样小。

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

这是怎么回事？

Answer 1

要使网页在移动设备上正常工作，您需要以下meta标签。

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

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

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