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

如何响应地在图像上层叠和嵌入外部html内容（iframe）？

1 个答案: