在 iframe 中使用背景图像和响应式设计强制桌面视图答案

【问题标题】：Force Desktop view in iframe with background image and responsive Design在 iframe 中使用背景图像和响应式设计强制桌面视图
【发布时间】：2019-03-29 13:19:20
【问题描述】：

提前致谢，我想用背景图片在 iframe 中显示网站，

并且响应式。我正在尝试使用此 CSS，但适用于强制桌面视图但不响应式。

检查这个sn-p。

我获得了桌面视图但没有响应

 
  div.laptop-wrapper {
      position: relative;
      padding-top: 25px;
      padding-bottom: 65.5%;
      height: 0;
  }
  div.laptop-wrapper iframe {
      box-sizing: border-box;
      background: url(https://i.stack.imgur.com/zZNgk.png) center center no-repeat;
      background-size: contain;
      padding: 11.9% 15.5% 14.8%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }

  .frame {
      width: 1080px;
      height: 786px;
      border: 0;
      -ms-transform: scale(0.25);
      -moz-transform: scale(0.25);
      -o-transform: scale(0.25);
      -webkit-transform: scale(0.25);
      transform: scale(0.5);
      
      -ms-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-6">
     <div class="laptop-wrapper">
        <iframe class="frame" src="https://laravel.com/"></iframe>
    </div>
    </div>
    <div class="col-sm-12 col-md-12 col-lg-6">
      <div class="laptop-wrapper">
        <iframe width="420" height="315" src="https://www.youtube.com/embed/9No-FiEInLA" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>
<h1 class="text-center">I want like this but it's not responsive, i need responsive </h1>
<div class="laptop-wrapper">
    <iframe class="frame" src="https://laravel.com/"></iframe>
</div>

【问题讨论】：

标签： html css iframe responsive-design desktop

【解决方案1】：

大多数浏览器中的“请求桌面”选项通过更改user-agent 标头来工作，如here 所述。要以“桌面模式”查看 iframe，您必须发送与默认浏览器设置不同的标头，不幸的是，根据this question，这是不可能的。但是您可以尝试使用 AJAX，在上述问题中给出了更详细的描述和示例。

希望你能用这个做点什么。

【讨论】：