Affichage différent sur Téléphone et écran PC, unités mm, pt

Salut,
En tant que novice, j'essaye de faire ma page en HTML.
Dans cette page, il faudrait que la dimension des images corresponde le plus à la réalité (monnaies, minéraux, micro-mécanique...);
mais je constate une différence d'affichage qui me parait incompréhensible.
En effet, puisqu'on est confronté à des écrans de densités très différentes (et surtout : de distances différentes) alors dans certains cas : l'unité "la moins pire" serait une invariante comme le millimètre, quitte à faire ensuite 2 pages soignées pour deux distances.
Quoi qu'il en soit, c'est une des manières de faire.

Aucun problème sur les écrans de bureau (?) car ils ont souvent une résolution entre 72 et 96 points-par-pouce, plus ou moins gérée par les 2 systèmes existants (windows et macintosh) bien que des écrans ont maintenant des résolutions plus denses (?)

En tout cas, quand je code un BLOC à 60 mm d'unité, mon navigateur firefox (vieille version / vieux système) l'affiche sur mon PC à... : 66 mm... (6 de plus à cause de ces problèmes de correspondance entre la résolution d'écran et sa gestion par le système, et de comment le navigateur la trouve) mais globalement c'est bon : on peut les mesurer à la règle sur l'écran.
Pareil pour un bloc codé en 227 px (pixels) : mon PC l'affiche exactement en 227 pixels (on peut les compter à l'écran);
et pareil pour les points-typo : si on code un "Font-Size:14pt" : en principe elle devrait faire 5 mm de haut sur n'importe quel média.

SAUF QUE, voilà le problème,
quand j'ouvre la page depuis mon téléphone (...mon téléphone portatif multi-fonctions...) :
mon bloc de 60 mm : mesure 14 mm ! (divisé par plus de 4).
PIRE ENCORE : je constate que l'unité PIXELS semble elle aussi divisée (par plus de 2).
Comme si le système android (ou le navigateur chrome) appliquait d'office des sortes de "coefficients réducteurs" à tout contenu web - y compris à l'unité PIXELS ?)?.. mais sans logique.
Et en pratique ça n'irait pas du tout car BEAUCOUP trop petit par rapport à la vue d'un écran de bureau.

Catastrophe de surcroit : les "IMAGES" en pixels (sensées respecter justement le principe du "piqué d'image" en résolution native de l'écran) bein elles aussi sont "réduites"...

- - -

DONC,
si quelques-uns sont intéressés pour eux-mêmes par ces problèmes :
passons aux tests pour voir ce que nous voyons les-uns-les-autres, c'est à dire savoir [u]COMMENT VOTRE téléphone cellulaire (multi-fonctions...) voit le code[/u].

L'écran de mon tél fait 62 millimètres de large et la notice indique 480 pixels.
Ainsi, 62 mm divisés par 480 pixels = environ 0,13 mm pour 1 pixel (0,1291 exactement).

Donc mon image de 227 pixels devrait mesurer sur mon téléphone : 227 x 0.13 = 29,5 mm (3 cm).
Or, je la mesure à 14 mm... (autrement dit à 107 pixels).

Question : Mon tél fait-il réellement 480 pixels de large ?
Je peux le savoir puisque j'ai vérifié en les comptant, avec une loupe très (très) puissante et un cache en papier pour les dévoiler un-à-un... Résultat : environ 1,3 mm pour environ 10 pixels... Donc la notice est correcte : on revient bien à 0,13 x 480 pixels = 62 mm.
Il y a donc bien un problème de conversion entre les médias.

- - -

LES QUESTIONS :
https://videodac.forumgratuit.org/

1 - L'image-1 est une image jpg sans DIV :
elle devrait s'afficher sur 227 px (pixels) de large, c'est la raison d'être de cette unité.
Sur mon téléphone elle s'affiche à environ 107 pixels.
Comment s'affiche-t-elle sur VOTRE téléphone...
(C'est la seule question difficile car il est impossible de les compter). Pour répondre, vous devez cherchez :
- d'abord, combien mesure 1 pixel de votre téléphone (sa largeur d'écran (en mm) divisée par sa définition (indiquée dans la notice);
- puis : [largeur de l'image-1 mesurée à la règle] divisée par [la largeur de votre pixel d'écran] = nombre de pixels de l'image affichée.
Les indications dans cette image orange : merci de ne pas en tenir compte, ce sont des notes pour mon écran-PC.


2 - Le DIV-1b
même question : l'aplat devrait s'afficher sur 227 px (pixels) (quitte à ce que la phrase soit coupée) (y'a pas de hauteur définie).
Sur mon tél : il s'affiche à environ 107 pixels.

3 - Le DIV-1c (codé avec un Span style=)
devrait être mesuré sur tout écran (en théorie) à : 60 mm (millimètres) de large, et 25 de haut.
Combien mesure-t-il sur votre téléphone et sur votre écran de bureau.
(sur mon tél : je le mesure à 14 mm).

4 - Le DIV-1d est codé avec un DIV style=, en inch (pouce) (on sait jamais comme ils sont des amerloques)...
L'aplat devrait faire 60 mm (2.4in), et 25 mm de haut (1inch).
Rien ne change sur mon tél : toujours à 14 mm.

5 - Div-1e : est dans une Class=, en mm;
il devrait faire 60 mm.


LES TYPOS...
Là-dessus, les unités fixes semblent respectées...
Un comble car là où il le faudrait : il n'y a plus aucun coefficient réducteur de distance.
Cependant, chose importante pour une bonne accroche de lecture : les lettres et les mots doivent toujours être un peu resserrés.
Or, là c'est le désastre sur mon tél...

Span-style-1 :
c'est un Times New Roman en 14pt (Points).
Quelle hauteur mesurez-vous sur votre tél ?
La hauteur se mesure du haut de l'ascendant au bas du descendant : dp) et devrait faire 5 mm.
Y'a une 2ième hauteur plus commode en 28pt (10 mm).
(Sur le mien c'est ok, 5 et 10 mm, l'unité est bien invariante d'un écran à l'autre).

Span-style-2 : (letter:-1pt).
Les lettres devraient se toucher (comme sur mon écran de PC)
mais ce n'est pas le cas sur mon tél (il y a juste un changement infime).
Comment est l'interlettrage sur votre tél.

Span-style-3 : devrait être illisible : (letter:-3pt).
L'inter-lettres est hors-normes (les lettres se chevauchent sur mon écran-PC)
MAIS c'est ainsi que j'obtiens un interlettrage normal (très serré)(encore lisible) sur MON téléphone...
Comment est-il sur votre tél et votre PC.

Span-style-4 : Vérification de l'unité mm (au lieu du point-typo).
La hauteur de bas en haut: dp) devrait faire 5 mm et 10 mm.
OK sur mon tél.

Span-style-5 : devrait être cette fois indéchiffrable...
La hauteur ne change pas : 5 mm,
mais l'inter-lettrage à -1,5mm rend la phrase totalement
indéchiffrable sur écran PC, et pourtant :
elle est "normalement" resserrée sur mon téléphone...

- Faisons les tests,
- essayez d'indiquer votre système (tél) et votre navigateur le cas échéant (même si je sais que beaucoup n'aiment pas et estiment que les protocoles devraient être respectés quelles que soient les versions).

Peut-être qu'on finira par cerner les causes à tout ça.
Peut-être que c'est moi qui méconnais certaines fonctions.
Merci.
(Notez que justement : il est inutile de faire des copies d'écrans...)
Modifié par tototoutou (27 Dec 2023 - 18:48)

Hello,

tototoutou a écrit :
l'unité "la moins pire" est une invariante comme le millimètre

Pour le coup, je n'en suis pas si sûr : le millimètre est tellement complexe à gérer dans le web (notamment en raison de la multiplicité des densités de pixels) que la seule tentative d'implémentation fut celle de Firefox avec son unité "mozmm"... abandonnée en 2018 : https://github.com/twbs/bootstrap/issues/25470

Ensuite, concernant les différences d'affichage, as-tu considéré les valeurs de Viewport et de zoom/dézoom propres aux navigateurs mobiles ?

Tous les détails ici : https://www.alsacreations.com/article/lire/1490-Comprendre-le-Viewport-dans-le-Web-mobile.html

Bonne lecture et bon courage dans tes tests... et bienvenue dans le monde variable du Web.

EDIT : voici un petit outil pour connaître la largeur du Viewport sur ton device (ordi ou téléphone), il te donnera la valeur en pixel utilisable dans le web : https://www.mydevice.io/
Modifié par Raphael (27 Dec 2023 - 18:30)

salut
utilise les px dans tes styles css
le pixel css est invariant et correspond aux pixels d"un écran de 1920px de large.
et une image par exemple de 300px de large aura toujours la meme taille peut importe l'écran utilisé. (heureusement)

a 1/2 chouilla près.
Modifié par drphilgood (27 Dec 2023 - 18:35)

drphilgood a écrit :
le pixel css est invariant et correspond aux pixels d"un écran de 1920px de large.
et une image par exemple de 300px de large aura toujours la meme taille peut importe l'écran utilisé. (heureusement)

Euh non pas du tout, cela dépendra du pixel-ratio du device justement (voir explications précédentes)

ben si

avec ceci dans l'entete html
<meta name="viewport" content="width=device-width, initial-scale=1.0">

sur 2 écrans qui ont la meme taille physique, l'un HD, l'autre 4K tes images ont la meme taille.

c'est ce que j'ai devant moi.
Modifié par drphilgood (27 Dec 2023 - 18:55)

... Oui en effet avec la meta viewport.

Mais ce n'est pas le comportement par défaut.

Bonjour,

1) Le code html devrait commencer par <!DOCTYPE HTML> (qui indique au navigateur que c'est du html 5). Sans cette ligne, c'est l'aventure. On doit donc avoir comme première ligne de code :

<!DOCTYPE HTML>

2) C'est une bonne habitude à prendre que de spécifier la langue de la page. En effet, il y a d'une langue à l'autre de petites différences d'affichage par défaut des navigateurs. Pour un texte en français :

<html lang="fr">

3) Le charset (UTF8) se spécifie avant tout affichage de texte (donc avant la balise <title>). Dans le monde moderne, la ligne à insérer est :

<meta charset="utf-8">

4) Pour obtenir une adaptation de la taille des caractères sur écran de téléphone pour qu'ils soient lisibles sans trop se poser de question, on a une instruction spécifique concernant le "viewport" qu'il est prudent d'insérer dans la page :

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

5) Ne pas oublier de spécifier les attributs width et height des images. Par exemple :

<img width="227" height="189" src="https://i.servimg.com/u/f47/16/95/01/76/image_10.jpg">

Ça n'empêche pas ensuite de changer les dimensions d'affichage des images via css.

6) On peut espérer que les mm soient respectés sur une imprimante. Par contre, il est illusoire d'espérer que 60mm spécifié dans le css fasse bien 60mm en toute circonstance sur toute machine et tout type d'écran.

Même si on ajoute la ligne concernant le "viewport" que j'ai indiqué au paragraphe 4), on n'aura pas 60mm. Sur mon écran d'ordinateur portable, 60mn deviennent plutôt 55mm et sur mon téléphone, ils deviennent plutôt 40mm.

C'est comme ça, le monde est imparfait !

7) Le pixel est une unité problématique. Mieux vaut utiliser le rem (ou le em) pour les dimensions de boites et les tailles de police (on oublie les font-size: 14px par exemple, et on préfèrera font-size: 0.875rem). On ne gardera les pixels que pour les bordures et éventuellement les tailles des images (quand celles-ci contiennent par exemple des quadrillages ou des schémas, mais même dans ces cas-là, le pixel est de moins en moins une nécessité du fait de la densité de pixels des machines actuelles qui affichent 1 pixel logique défini dans le css via plusieurs pixels physiques, et qui de plus modifient les couleurs en faisant des dégradés, ce qui fait qu'une ligne droite noire de 1px de large sera éventuellement dessiné sur l'écran via 2 pixels gris).

Si on fait tout ça, on ne devrait pas voir de catastrophe quand on passe d'un affichage sur écran de bureau à un affichage sur écran de téléphone.

Exemple de code :

<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Forum stomie et stomisés du 42-43, Association IAS d'aide et d'activités diverses, Loire, Saint-étienne, Haute-Loire, opération du colon poche urinaire">
<title>Forum stomie et stomisés du 42-43</title>
<style>
img
{
	width:60mm;
}
#div1b
{
	width:227px;
	background-color:#906000;
	color:#fff;
}
</style>
</head>
<body>
<img alt="Exemple d'image" width="227" height="189" src="https://i.servimg.com/u/f47/16/95/01/76/image_10.jpg">
<div id="div1b">DIV 1b : l'APLAT devrait faire 227px de large.</div>
</body>
</html>

Amicalement,
Modifié par parsimonhi (27 Dec 2023 - 20:53)

Bonjour,

ça aura été drôle de comparer avec cette page un max-width: 210mm; affiché - Firefox - sur un écran de laptop de 14" (ou 14,2" ? Peu importe) en 1920 de large vs. l'écran externe de 27" en 2560px : y a rien qui fait la largeur d'une feuille A4 . Moins dans le 1er cas, un peu plus dans le 2nd cas. Rien de surprenant avec des unités absolues mais le test valait le coup !

2 pistes sur le pourquoi du comment :
- du point de vue des équipes ayant développé l'iPhone en 2009, elles devaient faire rentrer au chausse-pied la home du New York Times dans 320px de large. Il y a comme une impossibilité physique et leur seul but était la lisibilité pour leurs clients avec la contrainte de ne pas pouvoir compter sur les concepteurs de site pour tous faire des modifs, en tout cas dans les 3 mois suivant la sortie de l'appareil... S'ils avaient gentiment attendu 3 ou 5 ans, peu de monde aurait acheté leur truc qui marche pas et
- toujours Apple, un jour est arrivé le Retina(c) : le double de pixels pour la même largeur (et hauteur donc quadruple). Contrainte identique : il faut que ça fonctionne sans que l'utilisateur ne s'en rende compte. On en est à des x3, x5, x2.5 (argh), etc D'où les CSS du point de vue du résultat final vs le nombre de points physiques affichables par un écran.

La situation il y a 10 ans, c'était :
https://wcet.wiche.edu/wp-content/uploads/sites/11/2013/12/overwhelmed-by-devices-by-lukew-on-flickr-cropped.jpg
Bien avant les 24" ou 34" 4k, écran Apple 6k, les panoramiques courbés gamers de 49", les 2796?×?1290 d'un iPhone 15 Pro Max, les montres connectées et... les lunettes de réalité augmentée (ouch )

tototoutou a écrit :
Dans cette page, il faudrait que la dimension des images corresponde le plus à la réalité (monnaies, minéraux, micro-mécanique...);

Je te conseillerai de mettre une échelle à côté ou d'indiquer leur taille dans le texte à côté, c'est ton meilleur garde-fou.
Ou une version PDF à côté pour quand ça devient important.
Par contre penser un instant imiter sur le web ce que fait PDF : hahaha
Modifié par Felipe (29 Dec 2023 - 19:10)