Запросы СМИ не работают внутри iframe

У меня есть веб-страница, которая отзывчива. Он использует медиа-запросы.

Но та же самая страница, загруженная в iframe, не работает.

Например, рассмотрим мою веб-страницу, я дал цвет фона как красный, когда ширина экрана меньше 640 пикселей.

@media only screen and (max-device-width : 640px) {

    .header-text {
        background-color: red;
    }
}

Поэтому, когда я загружаю это окно в новую вкладку и делаю ширину браузера менее 640 пикселей, цвет фона становится красным.

Но одно и то же окно, загруженное в iframe размером 320 * 480, не имеет цвета фона красного цвета.

В коротких медиа-запросах не работает в iframe.

Справка Pls.

Ответ 1

Попробуйте это, вместо device просто настройте width

Измените

@media only screen and (max-device-width : 640px) {

@media only screen and (max-width : 640px) {

Кроме того, рекомендуется указывать как минимальную, так и максимальную ширину порта просмотра, если вы хотите избежать рассмотрения заявок объявлений мультимедийных запросов в своем стиле

@media screen and (min-width: 320px) and (max-width: 640px) {
    .header-text {
       background-color: blue;
    }
}

Ответ 2

Мне пришлось настроить таргетинг на ширину iframes. (Может не работать во всех ситуациях)
Но то, что я сделал, это сделать ширину 100% iframe, а затем она изменится с окном, так что все, что я сделал, было нацелено на пиксели iframe вместо окна

Ответ 3

Включите метатест в HTML, который загружает ваш iframe, и он должен работать, по крайней мере, на устройствах Android.

<meta name="viewport" content="width=device-width, initial-scale=1">