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

max-width fait référence à la largeur de la fenêtre et peut être utilisé pour cibler des tailles ou des orientations spécifiques en conjonction avec max-height. En utilisant plusieurs conditions 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. Cela ne changera pas sur un périphérique donc ne peut pas être utilisé pour changer de feuilles de style ou de directives CSS comme l'écran est tourné ou redimensionnée.

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

Pour tous les points d'arrêt qui sont principalement pour "appareil mobile", j'utilise min(max)-device-width et pour les points d'arrêt qui sont principalement pour" bureau " min(max)-width.

Il y a beaucoup de "Appareils 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 */
}

Max-device-width aura des valeurs constantes (probablement deux)

@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 signifie la taille actuelle du navigateur.

La différence est que max-device-width est la largeur de tout l'écran 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, à la place, je suis sûr que max-width fonctionnera pour tous les types de navigateur mobile (j'ai eu le tester dans Chrome, firefox et opera pour ANDROID).

Si vous faites une application multi-plateforme (par exemple. utiliser phonegap / cordova) alors,

N'utilisez pas device-width ou Device-height. Utilisez plutôt la largeur ou la hauteur dans les requêtes multimédia CSS car l'appareil Android donnera des problèmes de largeur ou de hauteur de l'appareil. Pour iOS cela fonctionne très bien. Seuls les appareils android ne prennent pas en charge device-width/device-height.

N'utilisez plus device-width / height.

Device-width, device-height et device-aspect-ratio sont obsolètes dans les requêtes média de niveau 4: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

Utilisez simplement width / height (sans min / max)en combinaison avec l'orientation et la résolution (min/max -) pour cibler des périphériques spécifiques. Sur mobile largeur/hauteur doit être la même que l'appareil-largeur/hauteur.

Max-width {[2] } est la largeur de la zone d'affichage cible, par exemple le Navigateur; max-device-width est la largeur de toute la zone de rendu de l'appareil, c'est-à-dire l'écran réel de l'appareil.

* si vous utilisez Max-device-width , lorsque vous modifiez la taille de la fenêtre du navigateur sur votre bureau, le style CSS ne changera pas en paramètre de requête multimédia différent;

• Si vous utilisez le max-width, lorsque vous modifiez la taille du navigateur sur votre bureau, le CSS passera à différents paramètres de requête multimédia et vous pouvez être affiché avec le style pour les mobiles,tels que les menus tactiles.