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

Question

我想为桌面用户提供一个手机图像，并覆盖一个iframe，显示一个外部网站，以适应手机屏幕。都应该有响应

如果可能的话，当访问者已经在使用手机时，他们应该看到与桌面相同的东西，但是没有手机作为框架。

有谁知道这是怎么做的吗?

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