html - ejemplos - iframe que es

Las consultas de medios no funcionan dentro de un iframe

Question

Tengo en una página web que es sensible. Hace uso de consultas de medios.

Pero la misma página cargada en un iframe no funciona.

Por ejemplo, considere mi página web, le he dado un color de fondo rojo cuando el ancho de la pantalla es inferior a 640 px

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

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

Así que cuando carga esa ventana en una nueva pestaña y hago que el ancho del navegador sea inferior a 640px, el color de fondo se vuelve rojo.

Pero la misma ventana cuando se carga en un iframe de 320 * 480 dimensiones no tiene color de fondo rojo.

En resumen, las consultas de medios no están funcionando en un iframe.

Por favor ayuda

Answer 1

Acabé teniendo que apuntar al ancho de iframes. (Puede no funcionar en todas las situaciones)
Pero lo que hice fue hacer el iframe al 100% de ancho y luego se redimensionaría con la ventana, así que todo lo que hice fue apuntar a la px del iframe en lugar de a la ventana

Answer 2

Incluya el meta a continuación en el HTML que carga su iframe y debería funcionar, al menos en dispositivos Android.

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

Answer 3

Pruébalo de esta manera, en lugar de un device solo apunta el width

Cambio

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

a

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

Además, es más recomendable apuntar el ancho de puerto de vista mínimo y máximo si desea evitar considerar el orden de las declaraciones de consulta de medios en su hoja de estilo

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