移动视图上的字体大小不一致，具体取决于 div 高度?

Question

我的HTML的相关部分看起来像这样：

<div class="container-main">
<p>TEXT HERE<p>
</div>

我的CSS看起来像这样：

p {
font-size: 20px;
}
.container-mobile {
background-color: white;
margin-top: 100vh;
width: 100wv;
height: 600px;
}

即使我将字体大小设置为 16px，文本在移动设备上也非常小。如果我将高度更改为"自动"，字体会突然变大得多。为什么要改变？在移动设备中处理字体大小的首选方法是什么？

Answer 1

将视口添加到页面的标题部分解决了问题

p {
font-size: 20px;
}
.container-mobile {
background-color: white;
margin-top: 100vh;
width: 100wv;
height: 600px;
}
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<div class="container-main">
<p>TEXT HERE</p>
</div>