Quelle est la différence entre la largeur maximale de l'appareil et la largeur maximale pour le Web mobile?

242

J'ai besoin de développer des pages html pour les téléphones iphone / android, mais quelle est la différence entre max-device-widthet max-width? J'ai besoin d'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?

virsir
la source
1
J'ai trouvé que cela max-device-widthfonctionne même si la <meta name="viewport" ...>balise n'est pas incluse pour les petits écrans et max-widthne fonctionne pas sans metabalise
Faizan Akram Dar

Réponses:

252

max-width 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

Il en va de même max-heightet max-device-heightnaturellement.

Ian Devlin
la source
15
Si vous souhaitez voir le changement lors du redimensionnement de votre navigateur, utilisez max-width pour le développement, bien que max-device-width soit plus précis pour la production.
John Magnolia
31
@JohnMagnolia Qu'est-ce qui vous fait penser que la largeur maximale de l'appareil est meilleure pour la production? La largeur maximale ne garantirait-elle pas une meilleure réactivité, quel que soit l'appareil?
e_known
8
@eknown, je suis d'accord. Les utilisateurs de tout le spectre des compétences / connaissances n'ont pas toujours la fenêtre de leur navigateur de bureau maximisée (mais je n'ai pas encore vu une tablette ou un téléphone dont le navigateur n'est PAS ouvert maximisé - je suppose que c'est possible dans une application hybride, mais que est un cas différent). La largeur maximale serait certainement plus universelle.
Jason
2
@eknown, je ne suis pas d'accord. Selon vos styles, vous pouvez avoir un aspect très différent après avoir atteint ce point d'arrêt multimédia et si vous chargez des feuilles de style basées sur des points d'arrêt multimédia, il peut être très choquant pour le site de prendre un tout autre aspect lors du redimensionnement de la fenêtre du navigateur.
TwinPrimesAreEz
2
Si vous avez une disposition radicalement différente pour les appareils mobiles, la raison fondamentale est probablement parce qu'il n'y a pas de curseur de souris (ils ont besoin de boutons plus gros et d'une seule colonne pour faire défiler). Une excellente requête média à utiliser dans ce cas est celle @media screen and (pointer: coarse) and (hover: none)qui passera à la version mobile quel que soit le nombre de pixels que les appareils mobiles intégreront dans leurs écrans à l'avenir.
EoghanM
81

max-widthfait référence à la largeur de la fenêtre et peut être utilisé pour cibler des tailles ou des orientations spécifiques conjointement avec max-height. En utilisant plusieurs max-width(ou min-width) conditions, 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-widthfait référence à la taille de la fenêtre d'affichage de l'appareil indépendamment de l'orientation, de l'échelle actuelle ou du redimensionnement. Cela ne changera pas sur un périphérique et ne peut donc pas être utilisé pour changer les feuilles de style ou les directives CSS lors de la rotation ou du redimensionnement de l'écran.

voncox
la source
11
Cette réponse m'a fait "cliquer" mieux que la réponse acceptée. Cela ressemble à la plupart des applications max-widthet ce max-heightseront celles à utiliser.
hotshot309
2
@JackieChiles fait un bon point dans un autre thread SO que l'on devrait considérer (concernant les styles mobiles apparaissant sur les appareils plus grands): stackoverflow.com/questions/8564752/…
hotshot309
5
Cette bonne réponse n'est pas complète: l'orientation échange la largeur et la hauteur de l'appareil sur Android mais pas iOS: voir quirksmode.org/blog/archives/2010/04/the_orientation.html .
16

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

Pour tous les points d'arrêt qui sont principalement destinés aux "appareils mobiles" que j'utilise min(max)-device-widthet pour les points d'arrêt qui sont principalement destinés à un "ordinateur de bureau" min(max)-width.

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 */
}
1ubos
la source
Ne répond pas à la question et est en fait une mauvaise façon de travailler sur vos points d'arrêt - Soyez prudent.
Quarante
8

max-device-width est la largeur de rendu du périphérique

@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.

Sarath
la source
2
@media all and (max-width: 400px) {} Quelle est la différence
virsir
5

la différence est que max-device-width est toute la largeur de l'écran et max-width signifie l'espace utilisé par le navigateur pour afficher les pages. Mais une autre différence importante est la prise en charge des navigateurs Android, en fait, si vous utilisez la largeur maximale de l'appareil, cela ne fonctionnera que dans Opera, mais je suis sûr que la largeur maximale fonctionnera pour chaque type de navigateur mobile ( Je l'avais testé sur Chrome, Firefox et Opera pour ANDROID).

Danny
la source
5

max-width est la largeur de la zone d'affichage cible, par exemple le navigateur; largeur-max-appareil 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 la largeur maximale de l'appareil , lorsque vous modifiez la taille de la fenêtre du navigateur sur votre bureau, le style CSS ne changera pas en un paramètre de requête multimédia différent;

• Si vous utilisez la largeur maximale , lorsque vous modifiez la taille du navigateur sur votre bureau, le CSS passera à un paramètre de requête multimédia différent et vous pourriez être représenté avec le style pour les mobiles, tels que les menus tactiles.

Lucky Chaturvedi
la source
3

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

N'utilisez pas la largeur ou la hauteur de l'appareil. Utilisez plutôt la largeur ou la hauteur dans les requêtes multimédias CSS, car l'appareil Android causera des problèmes de largeur ou de hauteur d'appareil. Pour iOS, cela fonctionne bien. Seuls les appareils Android ne prennent pas en charge la largeur / la hauteur de l'appareil.

Himanshu Garg
la source
2

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

la largeur, la hauteur et le rapport hauteur / largeur de l'appareil sont déconseillés dans Media Queries Level 4: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

Utilisez simplement la largeur / hauteur (sans min / max) en combinaison avec l'orientation et la résolution (min / max-) pour cibler des appareils spécifiques. Sur mobile, la largeur / hauteur doit être identique à la largeur / hauteur de l'appareil.

SammieFox
la source
Les éléments "device-xxx" simples sont obsolètes, les éléments "max-device-xxx" ne sont PAS obsolètes.
Roger Krueger
1
@RogerKrueger Êtes-vous certain de cela? Je ne vois rien pour indiquer que les requêtes multimédias max-device-xxx ne sont pas obsolètes.
Jonny Cook