CSS 绝对位置导致 Google Dev Tools 中的字体大小调整

标签 css google-chrome

伙计们,我有一个很奇怪的问题,我不确定它是否与 CSS 或 Chrome 本身有关。

我在一个网站上工作时发现,如果我在移动预览中,并将一个 block 定位为绝对, block 内的字体在屏幕上显示得很少。

请截图:

启用绝对位置:

enter image description here

位置绝对禁用

enter image description here

我已经删除了所有样式和脚本来测试它,同样的问题。

目前我的代码如下所示:

<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/

相关文章:

javascript - 如何使用 jQuery 获取文本输入的所有值?

html - Bootstrap 模态元素不工作

image - 叠加在带有名称的图像上

css - 动态内容忽略 Chrome CSS

javascript - JSON.parse 返回字符串而不是数组

html - div-width 取决于 sibling 的宽度

javascript - 如何在需要的字段集标签中制作输入标签?

html - font-family firefox 子元素不继承,而 chrome 可以正常工作

javascript - Chrome 没有将 facebook 应用程序 javascript 引入页面

css - 列数在 Chrome 中不起作用