Media queries et fin de "device-width"

Bonjour

Je vois un sujet en cours pour un problème de mise en page, et je suis également en plein dedans pour ma nouvelle version de site internet. Et j'ai cherché dans l'historique du forum et je ne vois pas de réponse claire, complète et récente.

Le problème de base est le suivant :

"device-width" est supposé disparaître à terme
(source : https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width )
C'est en mode "déprécié" ou carrément "obsolète" selon les sources.

Ainsi, l'astuce de dire que width=device-width afin de compenser toutes les disparités d'écrans de téléphone, est (plus exactement SERA) réduite à néant.

La question est : COMMENT FAIRE pour distinguer les différents formats d'écrans efficacement, notamment pour les téléphones?

- Utiliser le nombre de pixels en largeur ou hauteur (du genre 768 / 1280 ...) ne fonctionne pas dans tous les cas car certains téléphones considèrent alors qu'on est en version tablette, car on a dépassé 768 pixels.

- Utiliser le nombre de DPI pourrait fonctionner, mais je n'ai pas de résultats probants complets (entre ce qui est annoncé techniquement, et ce qui est pris en considération, il y a un fossé). Pourtant, en théorie, on pourrait pointer un niveau élevé de DPI (>200 ou même >230 selon les dernières données techniques des téléphones des 5 dernières années) en opposition aux DPI des moniteurs d'ordinateur.

- Utiliser les formats d'écran est une usine à gaz (car on ne peut pas utiliser un coefficient, mais il faut écrire le vrai format de l'écran du genre "19/9" pour que ce soit totalement accepté en validation W3C. Donc il faudrait citer TOUS les formats de téléphones existants. Mais certains formats sont identiques à des formats de tablettes ou moniteurs). J'ai d'ailleurs testé avec les coefficients, et là aussi la réalité technique inclue un GROS flou (il y a des énormes marges d'erreurs qui font entrecroiser plusieurs types d'écrans).

J'avais récupéré les données techniques d'environ 200 téléphones et moniteurs afin d'en sortir des données statistiques (pixels largeur, pixels hauteur, DPI, format, ratio chiffré ...) et de créer des critères TRES distinctifs et sans erreur possible. Cependant la mise en pratique est bancale. Ce qui est dingue, c'est qu'en théorie, tout était bien carré.



De mon côté, pour avoir une version responsive, j'utilise plusieurs mises en forme :

1. BASE POUR LE VERTICAL (media query vertical simple): Téléphone vertical

2. Variante : tablette verticale (hauteur > 768 pixels)

3. BASE POUR L'HORIZONTAL (media query horizontal simple) : Petit écran horizontal
(équivalent à 1200-1536 pixels)

4. Variante : Ecran large horizontal (1537-1920 pixels)

5. Variante : Ecran très large horizontal (>1920 pixels)

6. Variante : Ecran tablette horizontal (entre 768 et 1199 pixels)

7. Variante : Ecran téléphone horizontal (> 230 dpi)


Je précise que ce n'est pas du simple texte pour mon site mais une imbrication bien spécifique et graphique. Je ne peux pas faire une présentation de différents DIV avec une instruction WRAP et tout qui s'ajuste au petit bonheur la chance. On est d'accord que les utilisations de flex et grid sont supposées être la grande tendance générale avec des contenus qui s'adaptent au fur et à mesure (ce qui limite en principe le besoin d'utiliser des media queries). Mais ça, ça ne fonctionne que si on des éléments qu'on veut laisser en électrons libres sur chaque écran. J'utilise flex et grid, mais ce n'est pas pour autant que j'estime que la mise en page doit être "aléatoire". Et je tiens encore à faire de BELLES versions de mon site en distinguant téléphone et tablette.

Pour l'instant, mes 7 versions tiennent à peu près la route, mais j'ai des problèmes d'identifications. Certains téléphones verticaux estiment être en tablette verticale. Certaines tablettes horizontales estiment être en écran moyen (pas trop grave en soi). Et j'ai des variations parfois selon le navigateur utilisé, sur le même appareil !

------

Qu'avez vous comme solution technique / pratique actuelle ?

(je précise : en CSS3 uniquement).

Bonsoir,

Il ne faut pas partir des écrans, il faut partir des breakpoints nécessaires au design du site (@media) ou, mieux encore, selon un conteneur (@container).

Je ne sais pas par où commencer pour vous expliquer cela car je ne sais pas où vous en êtes. En effet, j'ai l'impression que vous vous êtes embrouillé les pinceaux.

Pour vous rassurer sur l'avenir du responsive, voici déjà une page de démonstration qui fonctionnera pour longtemps : Grids.

Voici maintenant un exemple de ce qu'elle utilise comme media queries :

@container grid (width < 35.01em) {
  .xs-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(var(--xs-size-column, 11em), 1fr));
  }
}

@container grid (35.01em < width) {
  .grid2,
  .grid3,
  .grid4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container grid (50.01em < width) {
  .grid3,
  .grid4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container grid (70.01em < width) {
  .grid4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

Merci pour vos deux premières réponses.

Mais ....

Pourquoi utiliser le device-width comme méthode classique, si on n'est pas censé s'y intéresser ?



Je donne un exemple très concret :

SAMSUNG GALAXY note 10 lite (résolution fabricant : 2400x1080 pixels) en ma possession, qui me sert pour tester.

En mode vertical, je fais une mise en page de base (sans media query)
Puis je fais une mise en page pour tablette verticale.

Pour vérifier si ça fonctionne, je mets une écriture en ROUGE qui n'est censée être que sur tablette (et donc pas sur téléphone qui "doit" avoir une largeur moindre).

La théorie, c'est ça :
@media screen and (orientation : portrait) and (min-width : 481px){
(et encore, je pourrais même faire 431 px)

Avec ça, on distingue bien les téléphones et les tablettes en mode vertical.



La pratique c'est ça :
@media screen and (orientation : portrait) and (min-width : 980px){

Mon téléphone a donc une largeur repérée de 979px !!! quand je suis en position verticale.

On est d'accord qu'une largeur de 979 pixels, ça peut se confondre avec autre chose, notamment une tablette, ou un navigateur réduit sur un moniteur. On est TRES LOIN des téléphones théoriques avec une largeur (à la verticale) de maximum 480 pixels.

On a beau me parler de pixels purs, afficher un texte sur un téléphone se fait différemment que sur une tablette ou un moniteur, car la surface de lecture est bien plus petite, donc il faut que le texte soit PLUS grand en proportion (ou du moins, il faut vérifier que cela soit lisible sur les 2 supports, en faisant des tests réels).

Et donc, comment faire sans utiliser device-width au départ ?


(suis-je complètement à côté de la plaque ou mes questions sont-elles pertinentes ?)



Ou bien faut-il coder les media query en EM au lieu de PX ?
Modifié par AlexInSi (23 Apr 2024 - 19:44)

C'est simple :

êtes-vous d'accord que si je tape (en CSS)
@media screen and (orientation : portrait) and (min-width : 481px){
ce n'est pas censé concerner un téléphone ? (car en théorie, un téléphone a une largeur de 480 pixels maximum)

Hé bien, je viens de le tester, et mon téléphone se sent concerné, car il affiche 979px de largeur en réponse au media query.

Pour que mon téléphone reste en version "téléphone" de mise en page, il faudrait que je tape
@media screen and (orientation : portrait) and (min-width : 980px){
(avec 980 pixels, mon téléphone estime ne plus être concerné car la largeur est trop importante, et donc c'est la mise en page tablette qui est développée).

Donc ma mise en forme n'est pas adaptée (car ça entre déjà dans le cas d'une tablette en vertical). Et surtout, on n'affiche pas une écriture avec le même ratio quand on parle d'un tout petit écran ou d'une tablette entre 4 et 10 plus grande.

Mon ancien site se portait très bien avec l'instruction de base en HTML
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"> et les media queries de base.

Sauf que ça ne va plus être possible pour mon nouveau site car device-width va disparaître des navigateurs (je rappelle l'information : https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width )

Toutes les disparités de téléphones avec différents formats et différentes densités de pixels (retina ou autre) créent un capharnaüm sans nom quand on n'utilise plus "device-width".
Modifié par AlexInSi (23 Apr 2024 - 20:57)

@AlexInSi

J'ai l'impression que vous compliquez considérablement cette utilisation de @media.
Comme le dit Olivier, ils ne sont là que pour définir le "breakpoint", le moment crucial où l'on change radicalement design du site pour l'adapter aux mobiles, pas pour faire du placement. Courir après les différentes tailles de mobiles est une tâche vouée à l'échec, tant il y en a. Avec Grid et Flexbox (qui ne sont pas une "grande tendance générale", mais bien une spécification fonctionnelle), des valeurs fluides en em, rem, vw, on doit pouvoir couvrir tous les besoins. Il est juste nécessaire d'adapter les positions qui passent de portrait à paysage (avec les @media). Un site bien fait pourrait n'avoir qu'un @media, celui pour passer aux mobiles et à la rigueur un autre pour les positions portrait et paysage. J'ai même vu passer un article dans lequel le développeur se vantait de ne pas les utiliser:

https://putaindecode.io/articles/responsive-sans-media-queries/

Après, on peut effectivement voir les densités, les écrans retina, le rendu des images. Deux articles à consulter :

https://www.alsacreations.com/astuce/lire/1730-retina-trick-compressive-images-resolution-picture-img-srcset-responsive.html

https://www.alsacreations.com/astuce/lire/1831-corriger-le-probleme-de-hauteur-100vh-sur-mobile.html
Comme dit ailleurs, un lien ou un codepen serait bien utile.
ps Je rajouterai que sur un mobile, lire un site en mode paysage n'a souvent plus de sens. Le même design prévu pour grand écran est brusquement lu sur un tout petit écran, tout est tassé. C'est juste utile pour lire des films ou jouer.
Modifié par Bongota (23 Apr 2024 - 21:34)

Ce n'est pas si mystérieux à mon sens : pour ce qui est de la balise link vers une feuille de styles, ce qui est de l'ordre d'une déclaration breakpoint devient uniquement dévolu au... CSS ***. Reste sauve la balise meta viewport qui est une balise déclarative sur la manière dont doit se comporter la page en responsive.

Ces deux tags HTML n'ont pas du tout le même rôle.

___
*** À tous les coup ça restera éternellement compatible malgré l'intention de dépréciation, mais autant rester dans une optique de bonnes pratiques.

Alors tout va bien pour moi.

Mon Tag HTML (avec device-width) transforme intégralement mes problèmes de test sur téléphone (je rentre dans les clous avec la largeur de pixels. Je ne suis plus à 980 pixels).

Et je n'ai jamais utilisé de media avec device-width directement, donc c'est PARFAIT !

Pour le reste, les breakpoints, j'avais bien compris la façon de réfléchir (penser à SA propre mise en page, puis les appareils afficheront selon leur définition, en tout simplicité). Ce n'était pas un problème en soi. C'était le problème des téléphones qui affichent des largeurs de dingue.

Merci à tous d'avoir participé.

-Sujet réglé-