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>
css
google-chrome
media-queries
developer-tools
Sam Scott
quelle
quelle
Antworten:
Ich habe dieses Problem behoben, indem ich meiner Seite ein Meta-Tag hinzugefügt habe:
UPDATE (Dezember 2019):
Es sieht so aus, als müssten Sie möglicherweise auch die Anfangsskala und die Minimalskala wie folgt einstellen:
quelle
946px
Seite 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 immer946px
im Emulator befindet. Das Ansichtsfenster-Tag teilt dem Browser mit, wie er versuchen soll, die Seite zu rendern.width=device-width
verhält sich so, wie Sie es erwarten würden, währendwidth=100px
alles vergrößert wird. Sie können mehr darüber hier lesen: w3schools.com/css/css_rwd_viewport.aspDie akzeptierte Antwort hat es nicht für mich getan, ich musste auch eine hinzufügen
minimum-scale=1
.quelle
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.
quelle
Funktioniert bei mir.
Fügen Sie einfach ein Meta-Tag für das Ansichtsfenster in den Kopfbereich Ihrer Seite ein. Siehe Beispiel:
quelle
Fügen Sie dieses Meta-Tag in Ihren Code ein:
quelle