Le query multimediali di emulazione della modalità dispositivo Chrome non funzionano

94

Per qualche motivo la modalità di emulazione del dispositivo non legge le mie query multimediali. Funziona su altri siti, inclusi i miei che ho creato con bootstrap, ma non funziona su media query che sto utilizzando da zero (facendo clic sul pulsante media queries il pulsante diventa blu ma non vengono visualizzate media query). File di prova di seguito. È un bug in Chrome o c'è qualcosa che devo modificare nel mio file?

<!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
fonte

2

Sam Scott: la risposta di @ BananaNeil è più soddisfacente della mia, se puoi, contrassegnala come la risposta migliore.

— Digger

247

Ho risolto questo problema aggiungendo un meta tag alla mia pagina:

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

AGGIORNAMENTO (dicembre 2019):

Sembra che potresti dover impostare anche la scala iniziale e la scala minima, in questo modo:

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

— BananaNeil
fonte

7

questo ha funzionato anche per me. Qualche idea sul perché questo risolva il problema?

— Richie Thomas

@BananaNeil: anche io sono curioso di sapere qual è il motivo dietro a questa soluzione per funzionare? qualche idea ?

— dreamweiver

2

Sembra che l'emulatore di Chrome cerchi sempre di eseguire il rendering e il ridimensionamento di una 946pxpagina in qualsiasi schermo di dimensioni che emula. Puoi vedere che ciò è vero controllando che la larghezza del tag body della tua pagina problematica sia sempre 946pxnell'emulatore. Il tag viewport indica al browser come dovrebbe provare a visualizzare la pagina. width=device-widthagisce come ti aspetteresti, mentre width=100pxscala tutto. Puoi leggere di più al riguardo qui: w3schools.com/css/css_rwd_viewport.asp

— BananaNeil

2

Può anche comportarsi in modo strano se hai ingrandito troppo ... Ottieni solo le dimensioni che puoi inserire. Su un Mac, se esegui cmd shift -, alla fine viene visualizzato di nuovo l'elenco degli emulatori mobili con Galaxy S5, iPhone 6 ecc ...

— JGFMK

1

È difficile ricordare che questa non è l'impostazione predefinita;)

— doublejosh

19

La risposta accettata non ha funzionato per me, ho dovuto aggiungere anche una minimum-scale=1.

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

— sanjsanj
fonte

1

hai ragione non ero a conoscenza di questa proprietà aggiunta scala

— minima

6

L'emulazione del dispositivo in Chrome è ancora un WIP. Ad essere onesti, penso che lo abbiano inviato a Chrome un po 'troppo presto. Prova a utilizzare Canary (il browser beta di Chrome) per testare l'emulazione, trovo che funzioni molto meglio di quello in Chrome.

— Digger
fonte

0

Per me va bene.

Metti semplicemente un meta tag viewport nella sezione head della tua pagina. Vedi esempio:

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

— Nati Kamusher
fonte

0

Includi questo meta tag nel tuo codice:

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

Espandi lo snippet

— williamvivas
fonte

0

Ho continuato ad avere lo stesso problema finché non ho notato che se ho più di un'implementazione per lo stesso insieme di regole a seconda delle dimensioni dello schermo:

Specificare sia la larghezza minima che quella massima per la stessa media query in modo che non venga sovrascritta da quella successiva:

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

}

Oppure imposta almeno un punto di interruzione su tutti:

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