Принудительное отображение рабочего стола в iframe с фоновым изображением и адаптивным дизайном - PullRequest
Новая
       10

Принудительное отображение рабочего стола в iframe с фоновым изображением и адаптивным дизайном

0 голосов
/ 29 марта 2019

Заранее спасибо, я хочу показать сайт в iframe с background-image,

и Responsive.i я пытаюсь с этим 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>

1 Ответ

0 голосов
/ 30 марта 2019

Параметр «запросить рабочий стол» в большинстве браузеров работает путем изменения заголовка user-agent, как описано здесь . Чтобы просмотреть iframe в «режиме рабочего стола», вам необходимо отправить заголовок, отличный от настроек браузера по умолчанию, и, к сожалению, согласно этот вопрос невозможен. Однако вы можете попробовать использовать AJAX, более подробное описание и пример приведены по вышеупомянутому вопросу.

Надеюсь, вы сможете что-то сделать с этим.

...