Bonjour,
je cherche une solution pour passer par dessus le zoom paramétré nativement sur les systèmes d'exploitation.
Par exemple un PC fixe aura son zoom à 100%, un pc portable à 125%, un mac book à 125% etc..
Du coup sur le site de mon client l'affichage est très gros puisque celui ci est zoomé et chez moi non. J'ai trouvé la solution pour ios via les viewport (initial-scale=0.75). Mais pour les OS classiques je ne trouve pas de solution sur le net. Même les gros sites type apple ne s'en soucient pas.. Je vous mets des screenshots pour illustrer mon problème ce sera plus parlant.
Merci par avance pour votre aide et sorry de vous embêter mais je ne trouve pas de solutions sur le net.
6 réponses
Bonjour.
Tu ne peux techniquement pas faire ce que tu demandes, modifier le comportement d'affichage d'un système d'exploitation, pour deux raisons.
La première, au cas où tu ne le saches pas, les navigateurs internet permettent également de modifier le zoom, ce qui influe donc sur l'affichage des pages web.
La seconde, c'est que si tu pouvais faire ça, quelle serait l'utilité des paramètres tel que ce que l'on appelle l'accessibilité et qui permet aux personnes par exemple qui ont des problèmes de vues, de pouvoir bénéficier de ce système en ayant la possibilité d'augmenter le zoom afin de pouvoir avoir un confort visuel correct ?
Tu peux faire en sorte d'adapter l'affichage du site web, mais seulement au niveau du css, par exemple avec les media queries par rapport à la résolution de l'utilisateur et/ou l'orientation de son support, mais tu ne pourras pas modifier le comportement que Windows ou le navigateur pourra avoir sur le site au niveau visuel.
Sinon ce serait comme si tu voulais dire que tu veux mettre des publicités sur ton site et que tu ne veux pas que les utilisateurs puissent avoir un bloqueur de publicité activé sur ton site.
*{
transform:scale(2);
}Non plus sérieusement, je ne vois pas comment tu peux faire ça a part avec les viewport comme tu l'a dit.
Mais si je peux me permettre, pourquoi cette fonctionnalité ?
Salut merci pour vos réponses en effet pour l'accessibilité ce serait anormal d'y toucher :)
Pour répondre à ta question Benjamin c'est mon client qui trouve le contenu trop gros et pour être franc je ne m'étais jamais posé la question de ces zoom d'OS.
Le soucis c'est que mon client et son entourage sont équipés uniquement de macbook et pc portable avec le zoom d'activé sur leur OS donc tout est gros :) enfin ça va 125% ce n'est pas non plus degueu :). Le site fonctionne parfaitement en responsive et malheureusement les media queries ne seront d'aucune utilités car le zoom ne change pas la résolution d'écran.
Du coup je vais devoir faire comprendre à mon client qu'il doit baisser le zoom de son mac pour voir les éléments moins gros en lui faisant des copies d'écrans de plusieurs sites reconnus qui on le mêm problème que le sien.
Merci bcp pour vos pistes de réflexions et sorry de vous avoir dérangé.
Je ne comprend toujours pas ce que le zoom viens faire ici .... Si ton client trouve le site trop gros, tu n'a qu'a diminuer les valeurs : containeur plus petit, moins d'espace blanc, police plus petite .
Enfin bref, du css pur et simple
malheureusement les media queries ne seront d'aucune utilités car le zoom ne change pas la résolution d'écran.
Les media queries ne modifient pas la résolution de l'écran mais ça permet d'adapter l'apparence du site (taille de la polie, des éléments de la page) selon la résolution de l'écran de l'utilisateur.
Sinon, concernant le zoom, tu peux regarder ici, ça te permet d'adapter tout comme les media queries la taille des éléments par exemple et tu as la possibilité de faire selon la valeur du zoom de l'utilisateur.
Par contre, Firefox ne semble pas être compatible avec.
Merci Lartak je vais regarder..
Pour benjamin afin que tu comprennes cette histoire de zoom.
Imaginons j'ai deux pc identiques avec un écran 14 pouces ayant comme résolution 1920 x 1080px, un des OS a un zoom à 125% l'autre à 100%. Je vais prendre pour exemple un h1, sur la maquette il faut que la taille de mon h1 soit équivalente à 2rem.
Donc mon css :
h1{
font-size : 2rem;
}Pour l'écran avec le zoom à 125% le font-size sera impacté et équivalent à 2,5rem, le rendu sera différent de la maquette pour le client. Le pb c'est que tout le monde ne sait pas modifier le zoom de son OS et du coup je voulais savoir s'il existait une fonction permettant de dire au font-size ne prend pas en compte le zoom de l'OS.
En espérant avoir été clair :)
Merci à vous