Les requêtes multimédias d'émulation du mode appareil Chrome ne fonctionnent pas

94

Pour une raison quelconque, le mode d'émulation de périphérique ne lit pas mes requêtes multimédias. Cela fonctionne sur d'autres sites, y compris mes propres sites que j'ai créés avec bootstrap, mais cela ne fonctionne pas sur les requêtes multimédias que j'utilise à partir de zéro (en cliquant sur le bouton de requêtes multimédias, le bouton devient bleu mais aucune requête multimédia n'est affichée). Fichier test ci-dessous. S'agit-il d'un bogue dans Chrome ou y a-t-il quelque chose que je dois modifier dans mon fichier?

<!DOCTYPE html>
<!--
Media Queries Example 1
Sam Scott, Fall 2014
-->
<html>
<head>
    <title>MQ Example 1</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body { font-family: sans-serif; }
        h1 { color: red; } 
        h2 { color:blue; }
        p { color:green; }

        @media (max-width: 768px) and (min-width: 481px) {
            h1 { color: green; } 
            h2 { color:red; }
            p { color:blue; }
        }

        @media (max-width:479px), print { 
            h1,h2,p { color:black; }
        }

        @media print {
            body { font-family: serif; }
        }


    </style>
</head>
<body>
    <h1>I'm a first level heading</h1>
    <p>I'm a paragraph.</p>
    <h2>I'm a second level heading</h2>
    <p>I'm another paragraph.</p>
</body>
</html>
css google-chrome media-queries developer-tools Sam Scott
la source
2
Sam Scott: La réponse de @ BananaNeil est plus satisfaisante que la mienne, si vous le pouvez, marquez-la comme la meilleure réponse.
Digger

Réponses:

247

J'ai résolu ce problème en ajoutant une balise Meta à ma page:

 <meta name="viewport" content="width=device-width">

MISE À JOUR (décembre 2019):

Il semble que vous deviez peut-être également définir l'échelle initiale et l'échelle minimale, comme ceci:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
BananeNeil
la source
7
cela a fonctionné pour moi aussi. Une idée pourquoi cela résout le problème?
Richie Thomas
@BananaNeil: même si je suis curieux de savoir quelle est la raison pour laquelle cette solution fonctionne? Des pensées ?
dreamweiver
2
Il semble que l'émulateur Chrome essaie toujours de rendre et de réduire une 946pxpage dans la taille d'écran qu'il émule. Vous pouvez voir que cela est vrai en vérifiant que la largeur de votre balise body de votre page problématique est toujours 946pxdans l'émulateur. La balise viewport indique au navigateur comment il doit essayer de rendre la page. width=device-widthagit comme vous vous attendez, width=100pxtout en augmentant tout. Vous pouvez en lire plus ici: w3schools.com/css/css_rwd_viewport.asp
BananaNeil
2
Il peut également se comporter de manière excentrique si vous avez overzoomé ... Vous n'obtenez que des dimensions que vous pouvez saisir. Sur un Mac, si vous faites cmd shift -, la liste des émulateurs mobiles réapparaît finalement avec Galaxy S5, iPhone 6, etc.
JGFMK
1
Il est difficile de se rappeler que ce n'est pas la valeur par défaut;)
doublejosh
19

La réponse acceptée ne l'a pas fait pour moi, j'ai dû ajouter un minimum-scale=1aussi.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
sanjsanj
la source
1
tu as raison je n'étais pas au courant de cette propriété
ajoutéeminimum
6

L'émulation de périphérique dans Chrome est toujours un WIP. Pour être honnête, je pense qu'ils l'ont poussé à Chrome un peu trop tôt. Essayez d'utiliser Canary (le navigateur bêta de chrome) pour tester l'émulation, je trouve que cela fonctionne bien mieux que celui de Chrome.

Excavateur
la source
0

Travaille pour moi.

Mettez simplement une balise Meta viewport dans la section head de votre page. Voir exemple:

 <head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>
Nati Kamusher
la source
0

Incluez cette balise Meta dans votre code: 

<head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>
Développer l'extrait

Williamvivas
la source
0

J'ai gardé le même problème jusqu'à ce que je remarque que si j'ai plus d'une implémentation pour le même ensemble de règles en fonction de la taille de l'écran:

Spécifiez à la fois la largeur minimale et maximale pour la même requête multimédia afin qu'elle ne soit pas écrasée par la suivante:

@media screen and (min-width:9px , max-width:9px) {

    css.selector { 

        style rules gets applied : in this range of screen sizes ;

    } 

}


css.selector{


    the other style get applied : starting from 10px ;

}

Ou définissez au moins un point d'arrêt sur tous:

@media screen and (min-width:9px) {

    some styles get applied : starting from this point ;

}

}

@media screen and (min-width:99px) {

    some styles gets applied : starting from this point ;

}

}
Mostafa
la source