Devrais-je utiliser max-device-width ou max-width?

Question

Avec les requêtes de médias CSS, vous pouvez utiliser max-device-width pour cibler une largeur de périphérique (telle qu'un iPhone ou un Android) et/ou un max-width qui cible une largeur de page.

Si tu utilises max-device-width, lorsque vous modifiez la taille de la fenêtre du navigateur sur votre bureau, le code CSS ne change pas car votre bureau ne change pas de taille.

Si tu utilises max-width, lorsque vous modifiez la taille de la fenêtre du navigateur sur votre bureau, un style adapté aux mobiles, tel que des éléments et des menus tactiles, peut s'afficher.

Le ciblage de navigateurs spécifiques (et de périphériques?) Est maintenant obsolète et vous devriez être un peu plus agnostique avec ce que vous ciblez. Cela s'applique-t-il également aux requêtes des médias?

Pourquoi voudriez-vous cibler l'un sur l'autre? Lequel est le recommandé?

Voici un exemple de requête multimédia que j'utilise sur un site Web de production:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) { /* Change a menu to fit the screen better, etc... */ }

J'ai tendance à utiliser les deux max-device-width et max-width.

Josh Crozier · Accepted Answer

TL; DR

Si vous créez un site Web réactif, utilisez min-width/max-width dans vos requêtes sur les médias plutôt que min-device-width/max-device-width afin de cibler un plus grand nombre de tailles d’écrans.

Selon le projet de spécification 2018 Requêtes sur les médias de niveau 4 , le device-width La fonctionnalité multimédia est obsolète . Il sera conservé pour des raisons de compatibilité ascendante, mais devrait être évité.

8. Annexe A: Fonctions de média obsolètes

Pour interroger la taille de la fenêtre d'affichage (ou de la zone de page sur le support de page), les paramètres width, height et aspect-ratio _ fonctions médias devraient être utilisées plutôt que device-width, device-height et device-aspect-ratio, qui fait référence à la taille physique du périphérique, quel que soit l'espace disponible pour le document mis en forme. Le device-* _ les fonctionnalités multimédias sont également parfois utilisées en tant que proxy pour détecter les périphériques mobiles. Au lieu de cela, les auteurs doivent utiliser des fonctionnalités multimédia qui représentent mieux l'aspect du périphérique contre lequel ils tentent de styler.

En remarque, n'oubliez pas de spécifier une balise méta viewport dans le <head> section de votre document:

<meta name="viewport" content="width=device-width, initial-scale=1">

Explication

En raison de toutes les résolutions d'écran et densités de pixels possibles d'un périphérique donné, n pixel n'est pas un pixel car plusieurs éléments doivent être pris en compte (zoom, densité de pixels, résolution et taille de l'écran, etc.). orientation de l'appareil, rapport de format, etc.). Dans ce cas, un pixel est en fait désigné par "unité de référence optique" plutôt que pixel physique.

Heureusement, vous pouvez spécifier une balise méta viewport dans le <head> section de votre document afin de contrôler la largeur et la mise à l'échelle de la fenêtre d'affichage du navigateur. Si cette balise a une valeur content de width=device-width, la largeur de l'écran sera correspondra aux pixels indépendants du périphérique et garantira que tous les différents périphériques doivent évoluer et se comporter de manière cohérente.

<meta name="viewport" content="width=device-width, initial-scale=1">

En termes de requêtes multimédia, vous voudrez probablement utiliser max-width plutôt que max-device-width, puisque max-width ciblera la fenêtre d'affichage (fenêtre actuelle du navigateur), alors que max-device-width ciblera la taille/résolution réelle du périphérique en plein écran.

En d'autres termes, si vous utilisez max-device-width, vous ne verrez pas appliquer différentes requêtes multimédia lors du redimensionnement du navigateur de votre ordinateur, car contrairement à max-width, seule la taille réelle de l'écran du périphérique est prise en compte; pas la taille actuelle de la fenêtre du navigateur.

Cela fait une énorme différence si vous essayez de créer une disposition adaptative car le site ne sera pas réactif lors du redimensionnement du navigateur. De plus, si vous utilisez max-device-width les requêtes multimédias que vous utilisez pour cibler des périphériques avec des écrans plus petits ne s’appliqueront pas aux ordinateurs de bureau, même si vous redimensionnez la fenêtre du navigateur pour qu’elle corresponde à la taille de cet écran plus petit.

À compter de 2018, le dernier brouillon de spécification de requête de support a en réalité déconseillé au device-width fonctionnalité média, il faut donc l’éviter.

En outre, cet article sur Google Developers décourage fortement l'utilisation de max-device-width:

[] Google Développeurs - Principes de la page Web - Requêtes avec des médias CSS sensibles

Il est également possible de créer des requêtes basées sur *-device-width; bien que cette pratique soit fortement déconseillée .

La différence est subtile mais très importante: min-width est basé sur la taille de la fenêtre du navigateur, alors que min-device-width est basé sur la taille de l'écran. Malheureusement, certains navigateurs, y compris le navigateur hérité Android), peuvent ne pas indiquer correctement la largeur de l'appareil, mais plutôt indiquer la taille de l'écran en pixels de l'appareil au lieu de la largeur de fenêtre d'affichage prévue.

De plus, en utilisant *-device-width peut empêcher le contenu de s'adapter sur les ordinateurs de bureau ou d'autres périphériques autorisant le redimensionnement des fenêtres, car la requête est basée sur la taille réelle du périphérique et non sur la taille de la fenêtre du navigateur.

Lectures complémentaires:

H&#229;kan Olsson · Answer

Évitez la largeur de l'appareil. La raison en est que vous ne pouvez pas savoir comment les navigateurs des utilisateurs y répondent.

Pour IOS, cela semble simple, du moins avec Safari. Il semble que ce soit une seule réponse de largeur de périphérique indépendante de l'orientation. De plus, la largeur du périphérique n'est indiquée que pour le côté le plus court du périphérique. J'ai testé cela sur iPhone 4S et iPad. Ils ont répondu à 320 et 768 respectivement, quelle que soit leur orientation.

Pour Android c'est plus imprévisible. J'ai testé six navigateurs sur un Huawei Ascend Y330 (navigateur par défaut d'Android, Chrome, Opera, Firefox, Firefox Bêta, Dolphin). La réponse varie en fonction du type de navigateur et de son orientation. .

J'ai testé sur une page avec une requête (max-device-width: *** px) et de trouver la valeur de px que je dois renseigner pour que la requête soit à l'état true. Quatre valeurs différentes étaient nécessaires (320, 480, 534, 800) en fonction du type et de l'orientation du navigateur. Cela rend la largeur du périphérique inutilisable.

Paul Fox · Answer

Si vous utilisez largeur maximale, lorsque vous modifiez la taille de la fenêtre du navigateur sur votre bureau, un style adapté aux mobiles, tel que des éléments et des menus tactiles, peut s'afficher.

Il est choquant pour moi que cela semble être l'opinion populaire que c'est souhaitable. Je n'ai pas compris si la conception fluide/liquide avant mobile était considérée comme mauvaise pour les bonnes ou les mauvaises raisons. Il me semble qu’il ne s’agit que d’une version plus sophistiquée de la mise en page liquide, mais que les concepteurs adoptent pour une raison quelconque.

Au milieu des années 2000, lorsque la communauté des concepteurs a choisi de s’associer à des dispositions fixes plutôt qu’à des solutions liquides, c’est parce que la redistribution du texte entravait la lisibilité, ce qui entraînait souvent la création de veuves et d’autres artefacts typographiques. En outre, le maintien de la base de code était souvent délicat, de conception en conception, pour éviter la collision d'éléments, etc.

Personnellement, j'utilise min/max-device-width car je préfère suivre les conventions relatives aux documents de bureau qui ont des décennies de priorité. Tous les documents que vous ouvrez sur Internet ne se comporteront pas de la sorte sur un bureau, pas plus que les autres types de documents ou d'applications que vous chargez sur votre bureau. Les pages conçues avant la domination du mobile, tout comme MS Word, Photoshop, etc., conservent leur position de défilement et ne modifient pas leur mise en page, ce qui permet aux utilisateurs de garder une trace du contenu au sein du flux de page lors de l'exécution de tâches non liées de gestion de fenêtres.

J'utilise généralement 3 points d'arrêt: un pour les téléphones, un pour la tablette et un pour le bureau. Le bureau et souvent au moins le portrait de paysage sont fixes et le portrait de la tablette et du dessous sont liquides. Cette combinaison de fonctions adaptatives et réactives permet au poste de travail de se comporter comme un site de bureau tout en évitant de devoir mettre en forme une dizaine de dispositions distinctes pour les appareils mobiles à largeur fixe. Le texte n'est pas redistribué sur les appareils mobiles, car la fenêtre d'affichage ne peut pas être redimensionnée.