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

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?

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.

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.

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

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.

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

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.

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.

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.