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

Question

使用绝对定位时，我在响应式设计方面遇到了一些问题。我有一个container-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">