IP Girl
  1. IP Girl
  3. Quelle est la différence entre max-device-width et max-width pour le Web mobile?
Intereting Posts
Pourquoi certains caractères ASCII ne peuvent-ils pas être exprimés sous la forme ‘\ uXXXX’ dans le code source Java? Fendre un morceau avec magit Allocation de stack / stack de structs dans Go, et leur relation avec la récupération de place Comment créer une requête HTTP Post avec un corps JSON dans Swift Options d’initialisation d’un tableau de chaînes Générer un UUID dans l’instruction Postgres for Insert? “Le pointeur déréférencé puni rompra les règles de crénelage ssortingct” Comment définir l’opacité ou la transparence d’un Panel dans WinForms? Erreur: «Impossible de charger le type MvcApplication» SecureSsortingng est-il toujours pratique dans une application C #? En Ruby, comment vérifier si la méthode «foo = ()» est définie? Pourquoi ne pas autoriser les déclarations de fonctions nestedes (fonctions à l’intérieur des fonctions)? A quoi sert la fonction de signature dans Git? Quelle est la culture invariante? Vérification de la requête vide dans Django

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 les téléphones iPhone / Android, mais quelle est la différence entre max-device-width et 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 la zone de rendu de l’appareil, c.-à-d. l’écran réel de l’appareil

Même chose pour la max-height max-device-height et la max-height max-device-height .

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 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, 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 de feuille de style ou de directive CSS lorsque l’écran est pivoté ou redimensionné.

Que penses-tu 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 «desktop», utilisez la min(max)-width .

Il y a beaucoup de “périphériques 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.

Si vous créez une application multi-plateforme (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 média CSS car le périphérique Android posera des problèmes de largeur de périphérique ou de hauteur de périphérique. Pour iOS, cela fonctionne bien. Seuls les appareils Android ne supportent pas device-width / device-height.

La différence réside dans le fait que max-device-width correspond à la largeur de l’écran et que 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 fonctionnera uniquement avec Opera, mais je suis sûr que max-width fonctionnera pour tous les types de navigateurs mobiles ( Je l’ai testé dans Chrome, Firefox et Opéra pour ANDROID).

N’utilisez plus device-width / height.

device-width, device-height et device-ratio sont obsolètes 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 périphériques spécifiques. Sur mobile, la largeur / hauteur doit être identique à la largeur / hauteur de l’appareil.

max-width est la largeur de la zone d’affichage cible, par exemple le navigateur; max-device-width est la largeur de la zone de rendu de l’appareil, c’est-à-dire l’écran 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 pour 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 de support différent et vous pourrez voir le style des mobiles, tels que les menus tactiles.