У меня есть iframe, который я хочу отображать в полноэкранном режиме только на мобильных устройствах. Я вижу решения для отображения в полноэкранном режиме на всех экранах, но мне это не нужно.

Вот мой код на данный момент:

<p align="center"><iframe src="LINK" title="iframe" width="900" height="650" frameBorder="0"></p>
</iframe>

Мне, наверное, следует использовать проценты для ширины и высоты на рабочем столе, верно? Но я не знаю, как это сделать, И установить ширину и высоту 100% на мобильных устройствах.

-1
Lauren D 2 Сен 2020 в 19:03

2 ответа

Лучший ответ

Просто используйте медиа-запрос:

<iframe class="iframe" src="https://www.google.com/" frameborder="0"></iframe>

.iframe {
  width: 100vw;
  height: 100vh;
}

@media (min-width: 600px) {
  .iframe {
    width: 600px;
    height: 600px;
  }
}

https://codepen.io/seanstopnik/pen/51c4cf447763a01468f7f517518b619f

1
Sean Stopnik 2 Сен 2020 в 16:19

Чтобы покрыть всю область просмотра, вы можете использовать:

<p align="center">
<iframe src="LINK" title="iframe" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;" frameBorder="0">
</iframe>
</p>

Это заполнит всю страницу или часть, которую вы хотите заполнить.

Для применения на мобильных устройствах удалите встроенный код стиля из тега iframe и используйте этот медиа-запрос в своем файле css:

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  iframe {
    position:fixed;
    top:0px;
    left:0px; 
    bottom:0px;
    right:0px;
    width:100%; 
    height:100%;
    border:none;
    margin:0;
    padding:0;
    overflow:hidden;
    z-index:999999;
  }
}
-1
Shahryar Mohajer 2 Сен 2020 в 16:19