Problème avec la mise à l'échelle appliquée par Windows 10

Bonjour,

J'ai remarqué que la mise à l'échelle appliquée par Windows 10 (Paramètres > Mise à l'échelle et disposition > Modifier la taille du texte, des applications et d'autres éléments) a une incidence sur la disposition des DIV d'une page web.

Personnellement, je veux développer avec la valeur d'échelle de 100%, c'est à dire sans aucun agrandissement, pour être aussi "objectif" que possible.

Comment éviter un chamboulement de l'organisation des DIV si une autre valeur d'échelle est utilisée ?

Peut-on avec du code CSS ou JS détecter si les paramètres système de l'appareil de l'utilisateur appliquent une mise à l'échelle supérieure à 100% ?

Ci-joint un "photomontage" illustrant en haut la disposition souhaitée (et obtenue) d'une série de 4 DIV côte à côte, avec une valeur de 100% dans les paramètres Windows, et en bas la disposition obtenue de la même série de 4 DIV si je définis la valeur de mise à l'échelle sur 125%. Comme on peut le voir, du fait de l'élargissement des DIV, celles-ci sont réparties sur deux lignes.

Merci !


Modifié par phd (04 Dec 2020 - 17:17)

Et pourquoi ne pas laisser faire l'utilisateur à sa guise en prévoyant ce cas, en codant en unités relatives, et laisser ainsi le site le plus accessible possible ?

Bonjour,

Olivier C a écrit :
Et pourquoi ne pas laisser faire l'utilisateur à sa guise en prévoyant ce cas, en codant en unités relatives, et laisser ainsi le site le plus accessible possible ?

+1

1)

phd a écrit :
Personnellement, je veux développer avec la valeur d'échelle de 100%, c'est à dire sans aucun agrandissement, pour être aussi "objectif" que possible.

Les zooms, c'est compliqué. Déjà, il y en a plusieurs : zoom de tout, ou bien zoom du texte seulement.

Ensuite, l'utilisateur peut aussi modifier la taille des caractères par défaut. Et aussi, la taille par défaut des caractères n'est pas la même pour toutes les machines et tous les navigateurs.

Ensuite, les écrans n'ont pas tous la même dimension, et la taille des fenêtres des navigateur peut être modifiée par l"utilisateur.

Ensuite, les mobiles ont un comportement particulier : ils peuvent adapter la taille de la police pour qu'elle reste lisible (s'il y a la bonne instruction dans le html).

En résumé, il n'y a pas que le zoom qui compte.

Pour toutes ces raisons , ça n'est pas raisonnable d'imaginer qu'on va faire une page qui aura la même disposition en toute circonstance. Il faut qu'elle s'adapte en fonction de la place disponible, comme l'a suggéré Olivier.

2)

phd a écrit :
Comment éviter un chamboulement de l'organisation des DIV si une autre valeur d'échelle est utilisée ?

En général, on ne tient jamais compte de la "valeur d'échelle". Par contre on tient souvent compte de la taille de la fenêtre (voir partie 3). Quand l'utilisateur fait un zoom, le nombre de pixels affichés dans la fenêtre est modifié, et c'est donc tout aussi efficace (et même plus) de considérer la taille de la fenêtre plutôt que la "valeur d'échelle".

3)

phd a écrit :
Peut-on avec du code CSS ou JS détecter si les paramètres système de l'appareil de l'utilisateur appliquent une mise à l'échelle supérieure à 100% ?

On peut plus ou moins, mais c'est extrêmement compliqué et pas forcément très fiable (ça dépend des navigateurs), et ça ne sert pas à grand chose (relire les parties 1 et 2). Par contre, on peut connaitre assez facilement la taille en pixels de la fenêtre où s'affiche la page avec du javascript (c'est cette taille qui compte et pas l'éventuel facteur de zoom choisi par l'utilisateur) avec par exemple window.innerWidth et window.innerHeight (il y a d'autres possibilités selon ce qu'on veut faire). Et on peut aussi en css adapter la présentation de la page en fonction de la taille de la fenêtre à l'aide des instructions dites "media queries".

Amicalement,