#html #iframe #embedding
#HTML #iframe #встраивание
Вопрос:
Я добавляю флипбук, который я создал на fliphtml5, на веб-сайт с использованием iframe. Флипбук отлично смотрится на рабочем столе, но некорректно отображается на мобильном устройстве. На мобильном устройстве отображается только часть флипбука.
Интересно, есть ли оператор условия кода, который можно добавить в iframe, чтобы flipbook отображался в одном размере для рабочего стола, а если мобильный, он скрывает рабочий стол и отображается в любом размере, подходящем для мобильных устройств.
Заранее спасибо за вашу помощь.
Ответ №1:
Вы должны использовать тег meta viewport в заголовке и медиа-запросах в css. Тег meta viewport выглядит так:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Это наиболее распространенный тег области просмотра, хотя вы можете создать его самостоятельно.
Запросы медиа-экрана являются частью css. Они начинаются следующим образом:
@media screen and (max-width: 600px /for mobile phones*/) {
/*CSS for mobiles*/
}
Узнайте о медиа-запросах здесь