web-dev-qa-db-fra.com

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

J'ai besoin de développer des pages html pour téléphones iPhone/Android, mais quelle est la différence entre max-device-width et max-width? Je dois utiliser différents CSS pour différentes tailles d'écran.

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

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

Quelle est la différence?

csscss3mobile-websitemedia-queries
236
virsir

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

max-device-width est la largeur de la zone de rendu de l'appareil, c'est-à-dire l'écran de l'appareil

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

243
Ian Devlin

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 association 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 périphérique tel qu'un iPhone.

max-device-width fait référence à la taille de la fenêtre d'affichage du périphérique, quelle que soit l'orientation, l'échelle actuelle ou le redimensionnement. Cela ne changera pas sur un périphérique et ne pourra donc pas être utilisé pour changer de feuille de style ou de directive CSS lors de la rotation ou du redimensionnement de l'écran.

81
voncox

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

J'utilise min(max)-device-width pour tous les points d'arrêt principalement destinés à un "appareil mobile" et pour min(max)-width pour les points d'arrêt principalement destinés à "Bureau".

Il existe de nombreux "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 */
}
15
1ubos

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

6
Sarath

la différence est que max-device-width correspond à la largeur de l'écran et max-width correspond à 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 utilisez max-device-width, cela ne fonctionnera que dans Opera, mais je suis sûr que max-width fonctionnera pour tous les types de navigateurs mobiles (je l’avais testé sous Chrome, Firefox et opera pour Android).

5
Danny

Si vous créez une application multiplate-forme (par exemple, en utilisant phonegap/cordova), alors,

N'utilisez pas device-width ou device-height. Utilisez plutôt la largeur ou la hauteur dans les requêtes de média CSS, car Android périphérique posera des problèmes de largeur ou de hauteur. Pour iOS cela fonctionne bien. Seuls les appareils Android ne prennent pas en charge la largeur/la hauteur du périphérique.

3
Himanshu Garg

N'utilisez plus la largeur/hauteur de l'appareil.

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

Utilisez simplement largeur/hauteur (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 identique à device-width/height.

2
SammieFox

max-width est la largeur de la zone d'affichage cible, p. ex. le navigateur; max-device-width est la largeur de la totalité de la zone de rendu du périphérique, c'est-à-dire l'écran du périphérique réel.

• Si vous utilisez le paramètre max-device-width, lorsque vous modifiez la taille de la fenêtre du navigateur sur votre bureau, le style CSS ne sera pas remplacé par un paramètre de requête multimédia différent.

• Si vous utilisez max-width, lorsque vous modifiez la taille du navigateur sur votre bureau, la CSS passera à un paramètre de requête multimédia différent et il se peut que le style des mobiles soit affiché. sous forme de menus tactiles.

2
Lucky Chaturvedi