伙计们,我有一个很奇怪的问题,我不确定它是否与 CSS 或 Chrome 本身有关。
我在一个网站上工作时发现,如果我在移动预览中,并将一个 block 定位为绝对, block 内的字体在屏幕上显示得很少。
请截图:
启用绝对位置:
位置绝对禁用
我已经删除了所有样式和脚本来测试它,同样的问题。
目前我的代码如下所示:
<html>
<head>
<title></title>
<style type="text/css">
div{
position: absolute;
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<p>Lorem Ipsum .... </p>
<div>TEXT</div>
</body>
</html>
附言在最新版本的 Chrome 和 Chrome Canary 上进行了测试 - 同样的问题。
最佳答案
我发现了问题,这是因为缺少视口(viewport)元标记...
如果有人遇到这样的问题,只需将下面的字符串添加到您的 HTML 的 head 标签中:
<meta name="viewport" content="width=device-width, initial-scale=1>
感谢您的帮助。
关于CSS 绝对位置导致 Google Dev Tools 中的字体大小调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37602836/