Comment gérez-vous le zoom du navigateur du client?

J'ai beaucoup d'images sur une page, une galerie. Je veux que les images restent nettes, donc je ne fais pas de mise à l'échelle du navigateur, j'utilise les dimensions originales de l'image.

Cependant, cela ne fonctionne que lorsque le niveau de zoom du navigateur est de 100%. Lorsque j'augmente ou diminue le niveau de zoom, la qualité des images diminue.

Certains clients ont en fait différents niveaux de zoom par défaut. Je me demandais, comment pouvez-vous le gérer et le faisons-nous du tout?

À votre santé

Je pense que la plupart des autres réponses ont manqué le point: il ne s'agit pas de remplacer les préférences de l'utilisateur, il s'agit de donner les images de la meilleure qualité dans le scénario commun de l'appareil d'un utilisateur attribuant plus d'un pixel physique pour chaque pixel CSS aka " Pixel de référence "dans votre image, ce qui entraîne la mise à l'échelle de l'image par le navigateur, ce qui la rend pixellisée et granuleuse.

Mes solutions suggérées ci-dessous, mais voici d'abord les quatre façons dont cela peut se produire:

• Le plus rare: l'utilisateur choisit de zoomer . Pas un gros problème, car c'est leur choix.
• Étonnamment commun: le navigateur de l'utilisateur est zoomé par défaut . Par exemple, de nombreuses machines Windows à haute densité de pixels sont agrandies par défaut à 125% ou plus par défaut, et Firefox a récemment (confusément!) Fait en sorte que dans ces cas, il indique aux utilisateurs qu'ils sont agrandis à 100% lorsqu'ils sont effectivement agrandis à 125% , les laissant se gratter la tête en se demandant pourquoi tout semble soudainement granuleux.
• Très fréquent: la plupart des appareils Android (? Et autres appareils) ont un rapport de pixels supérieur à 1. Cela signifie que chaque « pixel CSS » se fait afficher à l' aide de plus d'un pixel physique - donc un 200px par 200px image réglée sur width: 200px; height: 200px;sera effectivement échelle cette image de 200 pixels par 200 pixels sur plus de 200 x 200 pixels, ce qui pourrait la rendre granuleuse.
• Très fréquent: de nombreux appareils Apple modernes ont des " écrans rétine ". C'est essentiellement la même chose qu'un appareil Android avec un ratio de pixels de 2, mais avec un meilleur marketing et quelques propriétés personnalisées qui permettent de le détecter par son nom.

Tout cela entraînera le problème de John d'une galerie d'images d'un aspect étonnamment granuleux.

J'espérais que quelqu'un aurait une excellente solution à ce problème, mais pour l'instant, voici mes options préférées, en commençant par la plus efficace mais la moins universellement possible:

1. Si possible, allez vector - SVG (ou Raphael.js si vous avez encore besoin de supporter IE8). En réalité, ce n'est qu'une option pour les icônes, les diagrammes, etc., et ce n'est jamais une option pour les photographies. Le SVG très complexe peut également être maladroit sur les mobiles bas de gamme en raison du traitement requis.
2. Si possible, détectez le rapport de pixels de l'appareil et diffusez des images en fonction de cela. Cela peut également résoudre le problème de Firefox sur Windows car Firefox sur Windows modifie sa lecture des ratios de pixels lors d'un zoom avant et arrière. L'inconvénient est que cela devient un problème de codage délicat impliquant des travaux de développement côté serveur et côté client.

3. Si 1. et 2. ne sont pas possibles, mais c'est vraiment important et la qualité d'image est plus importante que, disons, le temps de chargement, il suffit de doubler l'image.

   • C'est ce que Google fait avec leur logo sur leur page d'accueil: ils écrasent une image PNG de 538 px x 190 px dans un conteneur de 269 px x 95 px. C'est aussi plus ou moins la même chose que le fonctionnement des images réactives.

   • Auparavant, cela était considéré comme une mauvaise pratique car les anciennes versions d'IE étaient terribles pour réduire les images, mais celles-ci sont maintenant très rarement utilisées et beaucoup moins courantes que les écrans à haute densité de pixels. C'est encore quelque peu indésirable car cela augmentera la taille de l'image et augmentera donc le temps de chargement - c'est un compromis que vous devez juger au cas par cas.

   • Le doublement de la taille est courant car très peu d'appareils ont un rapport supérieur à 2, très peu d'utilisateurs font un zoom avant de plus de 200% et la mise à l'échelle des images à 50% est plus propre que les autres.
4. Si 1, 2 ne sont pas possibles et que les temps de chargement sont une priorité trop élevée pour 3, je ne connais pas d'autres options, et ma recommandation est de ne pas s'en inquiéter, car la moitié des sites sur Internet ont le même problème , et les personnes ayant ce problème sur votre site auront également ce problème sur d'autres sites. Enfer, Firefox sur Windows pixélise même ses propres boutons d'interface utilisateur ...

Comme l'a commenté DA01, vous ne devez rien y faire.

Le zoom est une option spécifiée par l'utilisateur et est donc sous leur contrôle. Les paramètres avec lesquels ils décident de jouer ne devraient pas être de votre responsabilité.

Vous pouvez prendre en compte différents navigateurs et versions et quoi d'autre, mais raisonnablement, vous ne devriez pas tenir compte du zoom d'un utilisateur.

Bien sûr, vous pouvez représenter 125% ou 150% (et vous pourriez même ne pas avoir à le faire). Mais 200%, 300%, plus? Cela n'a tout simplement aucun sens.

Que faire si l'utilisateur utilise le thème des fenêtres à contraste élevé? Et s'ils utilisent constamment la loupe? On s'en fout?

Idéalement, votre site Web est suffisamment flexible pour ne pas faire une réelle différence entre une petite différence de zoom, mais les images diminueront de qualité avec le zoom, mais ce n'est pas votre responsabilité.

Ce n'est bien sûr que mon opinion, mais l'entreprise pour laquelle je travaille dit également explicitement aux clients que nous ne prenons pas en charge leurs préférences de zoom.

D'autres personnes ont donné d'excellents conseils sur les problèmes auxquels vous serez confrontés et je ne suis pas assez bon dans ce domaine pour faire un bon tutoriel mais ...

Vous voudrez peut-être concevoir un site réactif qui s'ajuste en fonction de la résolution / de l'appareil de l'utilisateur, puis vous recherchez probablement du code qui fera basculer les images vers des fichiers de résolution supérieure ou inférieure sur demande, plutôt que d'étirer et de presser les images que vous avez.

La dernière fois que j'ai essayé de le faire, j'ai utilisé media-query.js et picturefill.js. Voir: http://responsivedesign.is/resources/images/picture-fill . J'avais une disposition en 3 colonnes où certaines images s'étalaient sur deux colonnes ... Lorsque la fenêtre du navigateur était suffisamment petite, les grandes images basculaient vers une version plus petite qui ne faisait qu'une seule colonne. Le navigateur de l'utilisateur chargerait simplement la version du fichier dont il avait besoin. (et dans mon cas, le plugin de maçonnerie déplacerait tout pour s'adapter).

Bien sûr, votre utilisateur doit avoir activé javascript ...

Vous ne pouvez pas forcer la main des utilisateurs. Les paramètres utilisateur ne vous conviennent pas. Les paramètres et les contourner est une mauvaise idée, il peut y avoir une raison pour laquelle l'utilisateur a fait quelque chose. Dans les deux cas, vous ne pouvez rien garantir sur les différents appareils.

En fait, si vous allez dans le côté technique, cela devient encore plus intéressant. Vous donnez vraiment les clés du royaume avec votre page Web. Voir l'utilisateur télécharge la page Web et l'utilisateur peut maintenant faire ce qu'il veut avec. Vous n'avez aucun contrôle sur cette couche, elle fonctionne après tout sur la machine des utilisateurs et ils peuvent faire ce qu'ils veulent. Même stackexhange n'a pas la même apparence sur mon ordinateur / mobile que sur le vôtre. Je change automatiquement certains aspects de l'interface graphique, pour corriger 2 bugs de rendu et j'ai ajouté 2 raccourcis.

Le comportement gênant de la mise à l'échelle des images sur les écrans HiDPI, qui conduit à des photos floues (alias le cauchemar des photographes), m'a également troublé pendant un certain temps. Je me suis également demandé s'il n'y avait pas d'attribut CSS simple pour le désactiver pour les images.

Ma solution actuelle avec CSS ressemble à ceci:

@media only screen and (min--moz-device-pixel-ratio: 1.25),
    (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-device-pixel-ratio: 1.25) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.25 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.5 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.75),
    (-o-min-device-pixel-ratio: 7/4),
    (-webkit-min-device-pixel-ratio: 1.75),
    (min-device-pixel-ratio: 1.75) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.75 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 2.00),
    (-o-min-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2.00),
    (min-device-pixel-ratio: 2.00) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 2.00 - var(--pic-width) + var(--pic-width));
        }
}

L'étape suivante consisterait à utiliser des classes pour définir et définir différentes tailles d'image si nécessaire. Je ne sais pas comment obtenir dynamiquement les tailles d'image. La fonction CSS attr () ne semble pas fonctionner pour cela.

Ce serait donc plutôt une question de programmation. Mais en utilisant JQuery, ou même juste un plan CSS, vous pouvez afficher différentes images en fonction de la largeur de l'écran des utilisateurs, de la hauteur de l'écran, etc.

Encore une fois, ce n'est probablement pas le stackexchange à demander.

Vous pouvez simplement le faire via HTML dans la tête du site ajouter ceci

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Ce n'est pas recommandé par les développeurs pour chaque type de site, mais devrait répondre à ce que vous demandez.

J'espère que cela aide: transformation de la règle CSS: échelle sur une balise de corps ou autre - pas parfait voir ici, s'il vous plaît:

/programming/23099849/stop-firefox-dpi-scaling-when-windows-setting-is-at-125/42755741#42755741