Quelle est la différence entre max-device-width et max-width pour le web mobile ?

Question

J'ai besoin de développer des pages html pour les téléphones iphone/Android, mais quelle est la différence entre les deux ? max-device-width y max-width ? Je dois utiliser un code css différent selon la taille de l'écran.

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

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

Quelle est la différence ?

Answer 1

max-width est la largeur de la zone d'affichage cible, par exemple le navigateur

max-device-width est la largeur de l'ensemble de la zone de rendu du dispositif, c'est-à-dire l'écran réel du dispositif.

Il en va de même pour max-height y max-device-height naturellement.

Answer 2

max-width se réfère à la largeur de la fenêtre d'affichage et peut être utilisé pour cibler des tailles ou des orientations spécifiques en conjonction avec max-height . L'utilisation de plusieurs max-width (ou min-width ), vous pouvez modifier le style de la page lorsque le navigateur est redimensionné ou que l'orientation change sur un appareil comme un iPhone.

max-device-width fait référence à la taille de la fenêtre d'affichage du périphérique, indépendamment de l'orientation, de l'échelle actuelle ou du redimensionnement. Elle ne changera pas sur un appareil et ne peut donc pas être utilisée pour changer les feuilles de style ou les directives CSS lorsque l'écran est tourné ou redimensionné.

Answer 3

Que pensez-vous de l'utilisation de ce style ?

Pour tous les points d'arrêt qui sont principalement destinés à un "appareil mobile", j'utilise min(max)-device-width et pour les points d'arrêt qui sont principalement destinés à un usage "bureautique". min(max)-width .

Il y a beaucoup de "dispositifs mobiles" qui calculent mal la largeur.

Regardez 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 */
}

Answer 4

Max-device-width est la largeur de rendu du dispositif.

@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 largeur maximale est la largeur de la zone d'affichage cible, c'est-à-dire la taille actuelle du navigateur.

Answer 5

La différence est que max-device-width est la largeur de tous les écrans et max-width signifie l'espace utilisé par le navigateur pour afficher les pages. Mais une autre différence importante est le support des navigateurs Android, en fait si vous allez utiliser max-device-width cela ne fonctionnera que dans Opera, au lieu de cela je suis sûr que max-width fonctionnera pour tout type de navigateur mobile (je l'ai testé dans Chrome, firefox et opera pour Android).