Écrans haute résolution et zoom du navigateur
J'ai une conception Web réactive qui prend également en charge les écrans haute résolution à l'aide de requêtes multimédias CSS ciblées pour modifier davantage le contenu. En général, le contenu s'affiche parfaitement - mais je rencontre des problèmes liés au zoom du navigateur.
Je testais l'application sur une Microsoft Surface Pro 2 et testais l'affichage en utilisant à la fois IE 11 (bureau) et IE 11 (tactile plein écran).
Ce que j'ai trouvé, c'est que la version de bureau de IE avait un niveau de zoom par défaut de 150%; ce qui est comme prévu car cela signifie que la résolution en pixels css convient à la taille d'écran de l'appareil.
Cependant, le IE11 tactile plein écran a un zoom par défaut de 100%; ce qui signifie qu'il sert les mauvaises requêtes de médias CSS pour la taille de l'appareil. Il est facilement résolu en zoomant à 150% manuellement, mais de nombreux utilisateurs ne savent pas qu'ils doivent le faire.
Je comprends que le zoom du navigateur est entièrement dans le domaine utilisateur/navigateur et ne peut pas (et ne devrait pas) être touché par les applications. Et, s'il était vrai que les niveaux de zoom par défaut étaient corrects, je ne serais pas inquiet (si un utilisateur de tablette veut pour voir la disposition du grand écran, je ne vais pas les arrêter).
Cependant, je ne veux pas que les utilisateurs reçoivent la mauvaise mise en page sans le savoir juste parce qu'un navigateur est par défaut au mauvais niveau de zoom.
Une notification utilisateur déclenchée par javascript conviendrait-elle? Ou devrais-je le gérer via des bases de connaissances de support telles qu'un FAQ (je ne pense pas que cela fonctionnerait car la plupart des utilisateurs ne se rendraient même pas compte que ce n'était pas bien)? devez l'accepter pour ce qu'elle est et la laisser tranquille?
Merci pour votre temps.
Ce sera mieux si vous commencez à concevoir selon la résolution d'origine plutôt que de vous fier au niveau de zoom car il n'y aura pas beaucoup de périphériques Windows avec un niveau de zoom par défaut défini. Par exemple HP OMni Tablet a un niveau de zoom de 100% défini par défaut et sa résolution est 1920x1200. Vos requêtes multimédias risquent donc de ne pas y fonctionner.
Une bonne stratégie pour réaliser ce type de conceptions réactives consiste à cibler un élément parent de haut niveau avec la bonne hauteur à l'aide d'une requête multimédia, puis à donner une dimension à tous les autres enfants en pourcentage de cela.