Qual è la differenza tra max-device-width e max-width per il Web mobile?

Devo sviluppare alcune pagine HTML per telefoni iPhone / Android, ma qual è la differenza tra max-device-widthe max-width? Ho bisogno di usare diversi CSS per diverse dimensioni dello schermo.

@media all and (max-device-width: 400px)

@media all and (max-width: 400px)

Qual è la differenza?

max-width è la larghezza dell'area di visualizzazione di destinazione, ad esempio il browser

max-device-width è la larghezza dell'intera area di rendering del dispositivo, ovvero la schermata del dispositivo reale

Lo stesso vale per max-heighte max-device-heightnaturalmente.

max-widthsi riferisce alla larghezza del riquadro di visualizzazione e può essere utilizzato per indirizzare dimensioni o orientamenti specifici in combinazione con max-height. Utilizzando più max-width(o min-width) condizioni è possibile modificare lo stile della pagina quando il browser viene ridimensionato o l'orientamento cambia su un dispositivo come un iPhone.

max-device-widthsi riferisce alle dimensioni del riquadro di visualizzazione del dispositivo indipendentemente dall'orientamento, dalla scala corrente o dal ridimensionamento. Questo non cambierà su un dispositivo, quindi non può essere utilizzato per cambiare fogli di stile o direttive CSS poiché lo schermo viene ruotato o ridimensionato.

Cosa ne pensi dell'utilizzo di questo stile?

Per tutti i punti di interruzione che sono principalmente per "dispositivo mobile" che uso min(max)-device-widthe per i punti di interruzione che sono principalmente per uso "desktop" min(max)-width.

Esistono molti "dispositivi mobili" che calcolano male la larghezza.

Guarda http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml :

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}

max-device-width è la larghezza di rendering del dispositivo

@media all and (max-device-width: 400px) {
    /* styles for devices with a maximum width of 400px and less
       Changes only on device orientation */
}

@media all and (max-width: 400px) {
    /* styles for target area with a maximum width of 400px and less
       Changes on device orientation , browser resize */
}

La larghezza massima è la larghezza dell'area di visualizzazione di destinazione indica la dimensione corrente del browser.

la differenza è che la larghezza massima del dispositivo è la larghezza di tutto lo schermo e la larghezza massima indica lo spazio utilizzato dal browser per mostrare le pagine. Ma un'altra importante differenza è il supporto dei browser Android, infatti se utilizzerai max-device-width funzionerà solo in Opera, invece sono sicuro che max-width funzionerà per ogni tipo di browser mobile ( L'ho provato su Chrome, Firefox e Opera per ANDROID).

max-width è la larghezza dell'area di visualizzazione di destinazione, ad esempio il browser; max-device-width è la larghezza dell'intera area di rendering del dispositivo, ovvero la schermata del dispositivo reale.

• Se si utilizza la larghezza massima del dispositivo , quando si modificano le dimensioni della finestra del browser sul desktop, lo stile CSS non cambierà in impostazioni di query multimediali diverse;

• Se si utilizza la larghezza massima , quando si modificano le dimensioni del browser sul desktop, il CSS cambierà in diverse impostazioni di media query e potrebbe essere mostrato con lo stile per i cellulari, come i menu touch-friendly.

Se stai realizzando un'app multipiattaforma (ad es. Utilizzando phonegap / cordova),

Non utilizzare la larghezza del dispositivo o l'altezza del dispositivo. Usa piuttosto la larghezza o l'altezza nelle query multimediali CSS perché i dispositivi Android daranno problemi in larghezza o altezza del dispositivo. Per iOS funziona benissimo. Solo i dispositivi Android non supportano larghezza dispositivo / altezza dispositivo.

Non utilizzare più larghezza / altezza del dispositivo.

larghezza dispositivo, altezza dispositivo e rapporto aspetto-dispositivo sono deprecati in Media Query Livello 4: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

Usa semplicemente larghezza / altezza (senza min / max) in combinazione con orientamento e risoluzione (min / max-) per indirizzare dispositivi specifici. Su mobile larghezza / altezza dovrebbe essere uguale a larghezza / altezza del dispositivo.