web-dev-qa-db-fra.com

Les requêtes de média d'émulation de mode de périphérique Chrome ne fonctionnent pas

Pour une raison quelconque, le mode d'émulation de périphérique ne lit pas mes requêtes multimédia. Cela fonctionne sur d'autres sites, y compris mes propres sites, que j'ai créés avec bootstrap, mais il ne fonctionne pas sur les requêtes de média que j'utilise à partir de zéro (cliquer sur le bouton de requête de média active le bouton en bleu mais aucune requête de média ne s'affiche). Fichier de test ci-dessous. S'agit-il d'un bogue dans Chrome ou dois-je modifier quelque chose 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>
cssgoogle-chromemedia-queriesdeveloper-tools
59
Sam Scott

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

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

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

6
Digger

La réponse acceptée ne l'a pas fait pour moi, je devais également ajouter un minimum-scale=1.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
3
sanjsanj

Travaille pour moi. 

Il suffit de mettre une balise méta viewport dans la section principale 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>
0
user37975