在我的网站上我有:
.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)。
然而,在我的智能手机中,横向边距比底部和顶部边距大得多,因此所有字母都有足够的空间,但仍有一些字母进入第二行(段落中的相同问题下)。
这是怎么回事?
最佳答案
要让网页在移动设备上正常工作,您需要以下元标记。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
简而言之,如果移动屏幕的宽度为 640px,页面可能会以 980px 的虚拟视口(viewport)呈现,然后它会缩小以适应 640px 的空间。
关于html - 智能手机横向边距比 PC 大得多,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52169461/