如何响应地在图像顶部分层和嵌入外部 html 内容 (iframe)？

Question

我想向桌面用户展示一个 phone 图像并覆盖一个显示外部网站的 iframe 以适应 phone 屏幕。两者都应该有响应。

如果可能，当访问者已经在移动设备上时 phone 那么他们应该看到与在桌面上看到的相同的东西，但没有 phone 作为框架。

有谁知道如何做到这一点？

Answer 1

这是我用于响应式堆叠 div 的方法。

这对您要求的两种方法都适用，但我建议不要向移动用户加载桌面版本，因为带宽目的是他们没有阻止内容加载的选项。

它基于百分比，根据我的经验，它具有最好的响应结果，并且代码最少。替换照片后，您需要调整 CSS 中的宽度和高度百分比值以根据需要缩放。

标记

<div id="container">
      <div id="photo">
        <img src="https://d3nj7353mvgauu.cloudfront.net/media/categories/iphone-6-6s-6-plus-6s-plus-1.png" width="100%" height="auto">
          <div id="site">
            <iframe src="https://www.godaddy.com/" width="99%" height="99%"></iframe>
          </div>
      </div>
    </div>

CSS

#container {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: auto;
}

#photo {
  position: absolute;
  width: 100%;
}

#site {
  position: absolute;
  width: 100%;
  max-width: 43%;
  height: 76%;
  top: 11.75%;
  left: 28.25%;
  border: none;
}

JsFiddle Demo Link

如何响应地在图像顶部分层和嵌入外部 html 内容 (iframe)？

How to responsively layer and embed external html content (iframe) on top of an image?

embed

iframe

mobile