CSS - 绝对定位的移动响应问题

Question

使用绝对定位时，我遇到了响应式设计的一些问题。我有一个包含图像和inner-div的容器div。通过绝对位置，我把内部div放在图像的前面。

<div class="outer-div" style="position: relative"> 

    <img src="image.jpg" /> 

    <div class="inner-div" style="position: absolute; top: 10px;"> 
    <p> text here </p> 
    </div> 

</div> 

问题是，当我在手机上查看此页面时，内部div和文本按比例缩小比例。这不是预期的效果。在较小的屏幕上，我希望字体大小保持不变（这意味着它将覆盖更多的屏幕）。

奇怪的是，在Chrome浏览器中，如果我调整浏览器大小，没有问题。但是，如果我点击开发人员工具（Windows上的Ctrl + Shift + C）下的移动视图，它将被缩小。

任何人都知道我可以绕过这个问题？

Answer 1

这个元标记添加到您的文档的头：

<meta name="viewport" content="width=device-width, initial-scale=1.0">