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));
  }
}

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)

@Olivier C :

Merci de venir parler du coeur du problème (ou la fausse crainte du problème pour ma part, si c'est avéré) !!!

Donc l'utilisation de "device-width" (en tant que référence de la largeur d'écran de celui qui consulte le site) serait obsolète mais seulement pour une partie du codage ????

Uniquement pour le CSS avec une requête media ? Et pour le HTML, c'est tout bon ?

Je veux bien vous croire, mais c'est pour le moins étrange tout de même (écarter une valeur en CSS mais la garder en HTML). Les mystères de l'informatique ...
Modifié par AlexInSi (25 Apr 2024 - 15:10)

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.