Zapytania o media emulacji trybu urządzenia Chrome nie działają

94

Z jakiegoś powodu tryb emulacji urządzenia nie odczytuje moich zapytań o media. Działa na innych witrynach, w tym na moich własnych witrynach utworzonych za pomocą programu bootstrap, ale nie działa w przypadku zapytań o media, których używam od podstaw (kliknięcie przycisku zapytań o media zmienia kolor przycisku na niebieski, ale zapytania o media nie są wyświetlane). Plik testowy poniżej. Czy to błąd w przeglądarce Chrome, czy muszę coś zmienić w moim pliku?

<!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
źródło
2
Sam Scott: Odpowiedź @ BananaNeil jest bardziej satysfakcjonująca niż moja, jeśli możesz, oznacz jego odpowiedź jako najlepszą.
Digger

Odpowiedzi:

250

Rozwiązałem ten problem, dodając metatag do mojej strony:

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

AKTUALIZACJA (grudzień 2019):

Wygląda na to, że może być konieczne ustawienie skali początkowej i skali minimalnej, na przykład:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
BananaNeil
źródło
7
to zadziałało również dla mnie. Masz jakiś pomysł, dlaczego to rozwiązuje problem?
Richie Thomas
@BananaNeil: nawet ja jestem ciekawy, dlaczego to rozwiązanie działa? jakieś pomysły ?
dreamweiver
2
Wygląda na to, że emulator chrome zawsze próbuje wyrenderować i skalować 946pxstronę do dowolnego rozmiaru ekranu, który emuluje. Możesz zobaczyć, że to prawda, sprawdzając, czy szerokość tagu body na problematycznej stronie jest zawsze 946pxw emulatorze. Znacznik viewport informuje przeglądarkę, jak powinna spróbować wyrenderować stronę. width=device-widthdziała tak, jak można by się tego spodziewać, jednocześnie width=100pxskalując wszystko w górę. Możesz przeczytać więcej na ten temat tutaj: w3schools.com/css/css_rwd_viewport.asp
BananaNeil
2
Może również zachowywać się dziwacznie, jeśli masz nadwyżkę ... Otrzymujesz tylko wymiary, do których możesz wejść. Na komputerze Mac, jeśli wykonasz przesunięcie cmd - w końcu lista emulatorów mobilnych wyskakuje ponownie z Galaxy S5, iPhone 6 itp ...
JGFMK
1
Trudno zapamiętać, że to nie jest domyślne;)
doublejosh
19

Zaakceptowana odpowiedź nie zrobiła tego za mnie, musiałem też dodać minimum-scale=1.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
sanjsanj
źródło
1
masz rację Nie byłem świadomy tej dodanej właściwościinimum-scale = 1 .. thx
adnan tariq
6

Emulacja urządzenia w Chrome to nadal WIP. Szczerze mówiąc, myślę, że trochę za wcześnie przenieśli to do Chrome. Spróbuj użyć Canary (przeglądarki Chrome w wersji beta), aby przetestować emulację, stwierdzam, że działa znacznie lepiej niż ta w Chrome.

Koparka
źródło
0

Pracuje dla mnie.

Po prostu umieść metatag viewport w sekcji head swojej strony. Zobacz przykład:

 <head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>
Nati Kamusher
źródło
0

Umieść ten metatag w swoim kodzie: 

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

williamvivas
źródło
0

Utrzymywałem ten sam problem, dopóki nie zauważyłem, że jeśli mam więcej niż jedną implementację dla tego samego zestawu reguł w zależności od rozmiaru ekranu:

Określ minimalną i maksymalną szerokość tego samego zapytania o media, aby nie zostało nadpisane przez kolejne:

@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 ;

}

Lub ustaw co najmniej jeden punkt przerwania dla wszystkich:

@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
źródło