Блог

Я добавляю флипбук, который я создал на fliphtml5, на веб-сайт с использованием iframe. Флипбук отлично смотрится на рабочем столе, но некорректно отображается на мобильном устройстве. На мобильном устройстве отображается только часть флипбука.

Интересно, есть ли оператор условия кода, который можно добавить в iframe, чтобы flipbook отображался в одном размере для рабочего стола, а если мобильный, он скрывает рабочий стол и отображается в любом размере, подходящем для мобильных устройств.

Заранее спасибо за вашу помощь.

Вы должны использовать тег 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*/
}
 

Узнайте о медиа-запросах здесь