web-dev-qa-db-fra.com

Les requêtes multimédias ne fonctionnent pas dans un iframe

J'ai dans une page Web qui est sensible. Il utilise des requêtes multimédias.

Mais la même page chargée dans un iframe ne fonctionne pas.

Par exemple, considérez ma page Web, j'ai donné la couleur d'arrière-plan en rouge lorsque la largeur de l'écran est inférieure à 640 px.

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

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

Ainsi, lorsque je charge cette fenêtre dans un nouvel onglet et que la largeur du navigateur est inférieure à 640 pixels, la couleur d'arrière-plan devient rouge.

Mais la même fenêtre lorsqu'elle est chargée dans un iframe de 320 * 480 dimensions n'a pas de couleur d'arrière-plan rouge.

Comment faire fonctionner les requêtes multimédias dans un iframe?

htmlcssiframemedia-queries
25
Aniket

Essayez-le de cette façon, au lieu de device ciblez simplement le width

Changement

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

à

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

De plus, il est plus conseillé de cibler à la fois min et max la largeur du port de vue si vous voulez éviter de considérer l'ordre des déclarations de requête média dans votre feuille de style

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

Incluez le méta ci-dessous dans le code HTML qui charge votre iframe et cela devrait fonctionner, au moins sur les appareils Android.

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

J'ai fini par devoir cibler la largeur des iframes. (Peut ne pas fonctionner dans toutes les situations)
.

6
James Harrington