Question

预先感谢，我想在iframe中以背景图片显示网站

和Responsive。我正在尝试使用此CSS，但可用于强制桌面视图，但无响应。

检查此代码段。

我有桌面视图，但没有响应

 
  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>

Answer 1

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

希望您可以对此做些事情。

使用背景图片和自适应设计在iframe中强制使用桌面视图

1 个答案: