У меня есть веб-страница, которая отзывчива. Он использует медиа-запросы.
Но та же самая страница, загруженная в iframe, не работает.
Например, рассмотрим мою веб-страницу, я дал цвет фона как красный, когда ширина экрана меньше 640 пикселей.
@media only screen and (max-device-width : 640px) {
.header-text {
background-color: red;
}
}
Поэтому, когда я загружаю это окно в новую вкладку и делаю ширину браузера менее 640 пикселей, цвет фона становится красным.
Но одно и то же окно, загруженное в iframe размером 320 * 480, не имеет цвета фона красного цвета.
В коротких медиа-запросах не работает в iframe.
Справка Pls.
Попробуйте это, вместо device просто настройте width
Измените
@media only screen and (max-device-width : 640px) {
to
@media only screen and (max-width : 640px) {
Кроме того, рекомендуется указывать как минимальную, так и максимальную ширину порта просмотра, если вы хотите избежать рассмотрения заявок объявлений мультимедийных запросов в своем стиле
@media screen and (min-width: 320px) and (max-width: 640px) {
.header-text {
background-color: blue;
}
}
Мне пришлось настроить таргетинг на ширину iframes. (Может не работать во всех ситуациях)
Но то, что я сделал, это сделать ширину 100% iframe, а затем она изменится с окном, так что все, что я сделал, было нацелено на пиксели iframe вместо окна
Включите метатест в HTML, который загружает ваш iframe, и он должен работать, по крайней мере, на устройствах Android.
<meta name="viewport" content="width=device-width, initial-scale=1">