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

标签 html css

我在使用绝对定位时遇到了响应式设计的一些问题。我有一个 container-div,其中包含一个图像和一个 inner-div。通过绝对定位,我把inner-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)下点击移动 View ,它就会缩小。

有谁知道我该如何避免这个问题?

最佳答案

将此元标记添加到您的文档头部:

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

关于html - CSS - 绝对定位的移动响应问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40206935/

相关文章:

javascript - 我怎样才能让我的 HTML5 canvas 更少像素化,或者更多抗锯齿?

HTML CSS 渐变 - 我已经尝试了一切

javascript - 滚动速度操纵CSS jquery

css - 100% 高度或 100% 宽度

html - CSS 网格最小跨度 3,如果类对象只是网格行中的对象,则填充行中的所有网格元素

html - 对象前面的 Z-index 但仍保持对象功能

javascript - 使菜单图标可从窗帘菜单中单击

java - 使用正则表达式从 html 中提取数据

asp.net-mvc - 使用 MVC 3.0 与继续使用 .NET 4+ 的长期/短期风险因素?

html - 将 CSS 悬停菜单转换为点击响应式设计