Est-il possible de détecter, à l'aide de JavaScript, lorsque l'utilisateur modifie le zoom d'une page? Je veux simplement attraper un événement "zoom" et y répondre (similaire à l'événement window.onresize).
Merci.
javascript
events
zoom
user123093
la source
la source
Réponses:
Il n'y a aucun moyen de détecter activement s'il y a un zoom. J'ai trouvé une bonne entrée ici sur la façon dont vous pouvez essayer de l'implémenter.
Vous pouvez également le faire en utilisant les outils de l'article ci-dessus. Le problème est que vous faites plus ou moins des suppositions éclairées pour savoir si la page a zoomé ou non. Cela fonctionnera mieux dans certains navigateurs que dans d'autres.
Il n'y a aucun moyen de savoir si la page est agrandie s'ils chargent votre page tout en zoomant.
la source
document.body.offsetWidth
J'utilise ce morceau de JavaScript pour réagir aux "événements" de Zoom.
Il interroge la largeur de la fenêtre. (Comme suggéré un peu sur cette page (à laquelle Ian Elliott a lié): http://novemberborn.net/javascript/page-zoom-ff3 [archive] )
Testé avec Chrome, Firefox 3.6 et Opera, pas IE.
Cordialement, Magnus
la source
Bonnes nouvelles
toutes les personnesquelques personnes! Les navigateurs plus récents déclenchent un événement de redimensionnement de la fenêtre lorsque le zoom est modifié.la source
Définissons px_ratio comme ci-dessous:
ratio px = ratio du pixel physique au px css.
s'il y a un zoom sur la page, les pixels de la fenêtre (px est différent du pixel) se réduisent et doivent être adaptés à l'écran de sorte que le rapport (pixel physique / CSS_px) doit devenir plus grand.
mais dans le redimensionnement de la fenêtre, la taille de l'écran diminue ainsi que les pixels. donc le ratio se maintiendra.
zoom: déclencher l'événement windows.resize -> et modifier px_ratio
mais
redimensionnement: déclenche l'événement windows.resize -> ne change pas px_ratio
Le point clé est la différence entre CSS PX et Physical Pixel.
https://gist.github.com/abilogos/66aba96bb0fb27ab3ed4a13245817d1e
la source
Cela fonctionne pour moi:
Il n'est nécessaire que sur IE8. Tous les autres navigateurs génèrent naturellement un événement de redimensionnement.
la source
Il existe un plugin astucieux
yonran
qui peut faire la détection. Voici son déjà répondu à la question sur StackOverflow. Cela fonctionne pour la plupart des navigateurs. L'application est aussi simple que ceci:Démo
la source
Always enable zoom
bouton dans l'option Accessibilité. La démo ne réagira pas au changement.Je voudrais suggérer une amélioration de la solution précédente avec le suivi des modifications de la largeur de la fenêtre. Au lieu de conserver votre propre tableau d'écouteurs d'événements, vous pouvez utiliser le système d'événements javascript existant et déclencher votre propre événement lors d'un changement de largeur, et y lier des gestionnaires d'événements.
Throttle / debounce peut aider à réduire le taux d'appels de votre gestionnaire.
la source
Vous pouvez également obtenir les événements de redimensionnement du texte et le facteur de zoom en injectant un div contenant au moins un espace insécable (éventuellement masqué) et en vérifiant régulièrement sa hauteur. Si la hauteur change, la taille du texte a changé (et vous savez à quel point - cela se déclenche également, d'ailleurs, si la fenêtre est agrandie en mode pleine page, et vous obtiendrez toujours le facteur de zoom correct, avec la même hauteur / rapport de hauteur).
la source
la source
Sur iOS 10, il est possible d'ajouter un écouteur d'événement à l'
touchmove
événement et de détecter si la page est agrandie avec l'événement en cours.la source
Bien qu'il s'agisse d'une question vieille de 9 ans, le problème persiste!
J'ai détecté le redimensionnement tout en excluant le zoom dans un projet, j'ai donc modifié mon code pour le faire fonctionner pour détecter à la fois le redimensionnement et le zoom exclusifs l'un de l'autre. Cela fonctionne la plupart du temps, donc si la plupart sont assez bons pour votre projet, cela devrait être utile! Il détecte le zoom à 100% du temps dans ce que j'ai testé jusqu'à présent. Le seul problème est que si l'utilisateur devient fou (c'est-à-dire redimensionner spastiquement la fenêtre) ou si la fenêtre est en retard, il peut se déclencher comme un zoom au lieu d'un redimensionnement de la fenêtre.
Il fonctionne en détectant un changement dans
window.outerWidth
ouwindow.outerHeight
comme redimensionnement de la fenêtre tout en détectant un changement danswindow.innerWidth
ouwindow.innerHeight
indépendamment du redimensionnement de la fenêtre comme un zoom.Remarque: Ma solution est comme celle de KajMagnus, mais cela a mieux fonctionné pour moi.
la source
0.05
sans au moins fournir une bonne explication. ;-) Par exemple, je sais que dans Chrome, en particulier, 10% est la plus petite quantité de zoom du navigateur dans tous les cas, mais il n'est pas clair que cela soit vrai pour les autres navigateurs. Pour info, assurez-vous toujours que votre code est testé et soyez prêt à le défendre ou à l'améliorer.Voici une solution propre:
la source
L'événement de redimensionnement fonctionne sur les navigateurs modernes en attachant l'événement à
window
, puis en lisant les valeurs debody
, ou d'un autre élément avec par exemple ( .getBoundingClientRect () ).Une autre alternative : l'API ResizeObserver
En fonction de votre mise en page, vous pouvez surveiller le redimensionnement d'un élément particulier.
Cela fonctionne bien sur les mises en page «réactives», car la boîte du conteneur est redimensionnée lors du zoom.
Veillez à ne pas surcharger les tâches javascript des événements de gestes de l'utilisateur. Utilisez requestAnimationFrame chaque fois que vous avez besoin de rafraîchissements .
la source
Selon MDN, "matchMedia" est le bon moyen de le faire https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#Monitoring_screen_resolution_or_zoom_level_changes
c'est un peu capricieux car chaque instance ne peut regarder qu'un seul MQ à la fois, donc si vous êtes intéressé par un changement de niveau de zoom, vous devez faire un tas de matchers ... mais comme le navigateur est chargé d'émettre les événements, c'est probablement encore plus performant que l'interrogation, et vous pouvez ralentir ou annuler le rappel ou l'épingler à une image d'animation ou quelque chose comme ça - voici une implémentation qui semble assez rapide, n'hésitez pas à échanger _throttle ou autre chose si vous en dépendez déjà.
Exécutez l'extrait de code et effectuez un zoom avant et arrière dans votre navigateur, notez la valeur mise à jour dans le balisage - je n'ai testé cela que dans Firefox! laissez-moi savoir si vous voyez des problèmes.
la source
Je réponds à un lien vieux de 3 ans mais je suppose que voici une réponse plus acceptable,
Créez un fichier .css en tant que,
PAR EXEMPLE:-
Le code ci-dessus rend la taille de la police «10px» lorsque l'écran est agrandi à environ 125%. Vous pouvez vérifier les différents niveaux de zoom en modifiant la valeur de «1000px».
la source
max-width
et le taux de zoom?