Медиа-запросы не работают в iframe

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

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

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

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

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

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

но то же самое окно при загрузке в iframe 320 * 480 размеры не имеют красный цвет фона.

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

помощь Pls.

23
css html iframe media-queries

3 ответов

попробуйте так, а не device просто цели width

изменить 

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

to 

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

кроме того, рекомендуется использовать оба мин и Макс view-Port width если вы хотите избежать рассмотрения порядка объявлений медиа-запросов в вашем стиле-sheet

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

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

6

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

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