html - 移动视图上的字体大小不一致取决于 div 高度?
问题描述
我的 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;
}
即使我将字体大小设置为 16 像素,移动设备上的文本也非常小。如果我将高度更改为“自动”,字体会突然变大。为什么改变?在移动设备中处理字体大小的首选方法是什么?
解决方案
将视口添加到页面的标题部分解决了问题
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>
推荐阅读
- javascript - 无法将属性传递给角度指令构造函数
- sql - 如何根据条件转置 SQL 输出?
- docker - 尝试从 Docker 映像显示 destop 时从 VNC 查看器获取黑屏
- html - 如何在 vuejs 中强制 @change
- php - 所以说我有一个这样的目录
- azure - Start-ComplianceSearch 上的 TaskCanceledException
- angular - Angular 6,使用'_'作为参数
- javascript - 过滤数组以响应多个值
- arrays - 在序言中打印数组/列表而不使用逗号、括号或空格的最佳方法?
- go - Golang wire is throwing wire: type x does not implement interface error