Firefox 7/7 gestisce la larghezza massima: 320px media query errata?

Question

Ultimamente sto riscontrando un comportamento strano con la query multimediale in Firefox e mi chiedevo chi lo stia facendo bene (rispetto a Chrome e IE9).

Ho il seguente CSS:

@media screen and (max-width:320px){ 
#sfWrapper{max-width:280px;font-size:0.625em;line-height:1.2em} 
#cpw_banner{display:none;visibility:hidden;} 
#cpw_content{width:100%;}#cpw_aside{width:100%;} 
} 

e Firefox (durante il ridimensionamento del browser, non sembra notare la massima:. Larghezza 320px, mentre reagisce alle grandi domande dei media schermo

non solo, ma quando uso ctrl + abbastanza spesso su una finestra che entreranno in gioco, dove, come Chrome e Internet Explorer 9 non si applicano nuovi media query su Ctrl +/ctrl -

---

Qualcuno sa qual è il comportamento "standard" per quanto riguarda le query ctrl +/ctrl- e media?

Grazie in anticipo ... J.

Answer 1

In Firefox, a seconda della configurazione esatta barra degli strumenti, può essere impossibile per l'area del contenuto a ridursi al di sotto di una certa larghezza. Se si imposta una pagina con una barra di scorrimento verticale, è possibile vedere la barra di scorrimento iniziare a scomparire quando la finestra diventa più piccola della larghezza minima. A quel punto, la finestra del browser si sta riducendo, ma il viewport della pagina NON è. Quindi se la larghezza minima è maggiore di 320 px nel tuo caso, la query multimediale sopra non si applicherebbe mai.

Il punto chiave è che le query multimediali corrispondono alla larghezza della finestra di visualizzazione, non alla larghezza della finestra del browser.

Inoltre, le query multimediali corrispondono ai pixel CSS, non ai pixel del dispositivo. Lo zoom in Firefox modifica le dimensioni di un pixel CSS nei pixel del dispositivo, pertanto la dimensione della finestra di visualizzazione (fissata nei pixel del dispositivo) cambia in pixel CSS.

Non esiste uno standard di ciò che lo zoom dovrebbe fare.

Answer 2

Ho lavorato su un design reattivo per 320 px ma Firefox non rispondeva.

Ho scoperto che, per qualche motivo, se si imposta la query multimediale su 480px - (max-width:480px) - allora Firefox applicherà comunque le query multimediali.

Answer 3

Non so perché la risposta fornita è stata barrata in quanto non risponde alla domanda dell'OP. Il motivo per cui la query multimediale non attiva 320 pixel è dovuta alla barra degli strumenti di navigazione in Firefox.

Se lo si spegne (andare su VISUALIZZA - BARRA DEGLI STRUMENTI - BARRA DEGLI STRUMENTI DI NAVIGAZIONE e deselezionarlo), la query multimediale scatterà a 320 pixel.