Блог

Я пытаюсь добавить iframe на страницы WordPress. Я хочу отобразить iframe A для пользователей настольных компьютеров и iframe B для мобильных пользователей, потому что некоторые элементы просто не работают с мобильными устройствами, и в то же время я не хочу терять функциональность для настольной версии. Я довольно новичок в программировании, поэтому подробное объяснение того, как решить эту проблему, было бы очень кстати.

Один из способов сделать это — использовать медиа-запросы CSS. @media(max-width: 540px) содержит стили, которые будут применяться только к экранам шириной не более 540 пикселей (и вы можете изменить их количество на любое, соответствующее вашим потребностям).

И, я полагаю, вы могли бы сделать это и для фактической страницы, на которую указывает iframe, так что вам в первую очередь не нужны два iframe. Т.е. применяйте медиа-запросы непосредственно к странице, на которой есть кнопки для отображения / скрытия на мобильном устройстве.

 /* mobile (you can change 540px to whatever breakpoint you like) */
@media(max-width: 540px) {
  .desktop {
    display: none;
  }
  
  .mobile {
    display: block;
    border: 1px solid red;
  }
}

/* desktop */
@media(min-width: 541px) {
  .desktop {
    display: block;
    border: 1px solid cyan;
  }
  
  .mobile {
    display: none;
  }
} 

 <iframe class="desktop"></iframe>

<iframe class="mobile"></iframe>