Emulationsmedienabfragen im Chrome-Gerätemodus funktionieren nicht

88

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, aber nicht auf Medienabfragen, die ich von Grund auf verwende (durch Klicken auf die Schaltfläche Medienabfragen wird die Schaltfläche blau, 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>

— Sam Scott
quelle

2

Sam Scott: @ BananaNeils Antwort ist zufriedenstellender als meine, wenn Sie können, markieren Sie seine als die beste Antwort.

— Digger

236

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

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

UPDATE (Dezember 2019):

Es sieht so aus, als müssten Sie möglicherweise auch die Anfangsskala und die Minimalskala wie folgt einstellen:

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

— BananaNeil
quelle

6

das hat auch bei mir funktioniert. Irgendeine Idee, warum dies das Problem löst?

— Richie Thomas

@ BananaNeil: Auch ich bin gespannt, was der Grund für diese Lösung ist. irgendwelche Gedanken?

— Dreamweiver

2

Es sieht so aus, als ob der Chrome-Emulator immer versucht, eine 946pxSeite zu rendern und auf den Bildschirm zu verkleinern, den er emuliert. Sie können dies erkennen, indem Sie überprüfen, ob sich die Breite Ihres Body-Tags Ihrer problematischen Seite immer 946pxim Emulator befindet. Das Ansichtsfenster-Tag teilt dem Browser mit, wie er versuchen soll, die Seite zu rendern. width=device-widthverhält sich so, wie Sie es erwarten würden, während width=100pxalles vergrößert wird. Sie können mehr darüber hier lesen: w3schools.com/css/css_rwd_viewport.asp

— BananaNeil

2

Es kann sich auch schrullig verhalten, wenn Sie überzoomt haben ... Sie erhalten nur Dimensionen, die Sie eingeben können. Wenn Sie auf einem Mac cmd shift - ausführen, wird die Liste der mobilen Emulatoren schließlich wieder mit Galaxy S5, iPhone 6 usw.

— angezeigt

1

Es ist schwer zu merken, dass dies nicht die Standardeinstellung ist;)

— DoubleJosh

17

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

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

— sanjsanj
quelle

1

Sie haben Recht, ich war mir dieser zusätzlichen Eigenschaftsskala = 1 nicht bewusst. thx

— adnan tariq

6

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

— Digger
quelle

0

Funktioniert bei mir.

Fügen Sie einfach ein Meta-Tag für das Ansichtsfenster 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>

— Nati Kamusher
quelle

0

Fügen Sie dieses Meta-Tag in Ihren Code ein:

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

Erweitern Sie das Snippet

— williamvivas
quelle