it-swarm.com.de

Emulation-Medienabfragen im Chrome-Gerätemodus funktionieren nicht

Aus irgendeinem Grund liest der Geräteemulationsmodus meine Medienabfragen nicht. Es funktioniert auf anderen Websites, einschließlich meiner eigenen Websites, die ich mit bootstrap erstellt habe. Es funktioniert jedoch nicht bei Medienabfragen, die ich gerade verwende (wenn Sie auf die Schaltfläche Medienabfragen klicken, wird die Schaltfläche blau dargestellt, es werden jedoch keine Medienabfragen angezeigt). Testdatei unten. Ist dies ein Fehler in Chrome oder muss ich etwas in meiner Datei ändern?

<!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>
59
Sam Scott

Ich habe dieses Problem behoben, indem ich meiner Seite ein Meta-Tag hinzugefügt habe:

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

Die Geräteemulation in Chrome ist immer noch ein WIP. Um ehrlich zu sein, denke ich, dass sie etwas zu früh auf Chrome umgestiegen sind. Versuchen Sie es mit Canary (dem Chrome-Beta-Browser), um die Emulation zu testen. Ich finde, es funktioniert viel besser als in Chrome.

6
Digger

Die akzeptierte Antwort hat es nicht für mich getan, ich musste auch einen minimum-scale=1 hinzufügen.

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

Funktioniert bei mir. 

Fügen Sie einfach ein Viewport-Meta-Tag in den Kopfbereich Ihrer Seite ein. Siehe Beispiel:

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