在JavaScript中捕捉浏览器的“缩放”事件
当用户更改页面的缩放时，是否可以使用JavaScript来检测？ 我只是想捕捉一个“缩放”事件，并作出响应（类似于window.onresize事件）。
谢谢。
没有办法主动检测是否有变焦。 我在这里find了一个很好的条目，告诉你如何实现它。
我发现了两种检测缩放级别的方法。 检测缩放级别更改的一种方法依赖于百分比值未缩放的事实。 百分比值相对于视口宽度，因此不受页面缩放的影响。 如果您插入两个元素，一个位置以百分比表示，另一个以像素表示相同的位置，则当页面缩放时，它们会分开。 find两个元素的位置之间的比例，你已经得到了缩放级别。 看testing用例。 http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3
你也可以使用上面的post的工具。 问题在于你是否或多或less地对网页是否缩放进行了合理的猜测。 这在某些浏览器中会比其他浏览器更好。
如果页面在缩放时加载页面，则无法判断该页面是否缩放。
我正在使用这段JavaScript来缩放“事件”。
它轮询窗口的宽度。 （有点build议在这个网页上（伊恩·埃利奥特链接到）： http : //novemberborn.net/javascript/page-zoom-ff3 [档案] ）
testingChrome，Firefox 3.6和Opera，而不是IE。
问候，马格努斯
var zoomListeners = []; (function(){ // Poll the pixel width of the window; invoke zoom listeners // if the width has been changed. var lastWidth = 0; function pollZoomFireEvent() { var widthNow = jQuery(window).width(); if (lastWidth == widthNow) return; lastWidth = widthNow; // Length changed, user must have zoomed, invoke listeners. for (i = zoomListeners.length - 1; i >= 0; --i) { zoomListeners[i](); } } setInterval(pollZoomFireEvent, 100); })();
这适用于我：
var deviceXDPI = screen.deviceXDPI; setInterval(function(){ if(screen.deviceXDPI != deviceXDPI){ deviceXDPI = screen.deviceXDPI; ... there was a resize ... } }, 500);
只有在IE8上才需要。 所有其他浏览器自然生成一个resize事件。
有一个从yonranbuild立的漂亮的插件可以做检测。 这是他以前在StackOverflow上回答的问题。 它适用于大多数浏览器。 应用程序是这样简单的：
window.onresize = function onresize() { var r = DetectZoom.ratios(); zoomLevel.innerHTML = "Zoom level: " + r.zoom + (r.zoom !== r.devicePxPerCssPx ? "; device to CSS pixel ratio: " + r.devicePxPerCssPx : ""); }
演示
好消息 大家 有些人！ 较新的浏览器将在缩放更改时触发窗口大小调整事件。
我想build议改进以前的解决scheme，跟踪窗口宽度的变化。 而不是保留自己的事件监听器数组，可以使用现有的javascript事件系统，并在宽度更改时触发自己的事件，并将事件处理程序绑定到它。
$(window).bind('myZoomEvent', function() { ... }); function pollZoomFireEvent() { if ( ... width changed ... ) { $(window).trigger('myZoomEvent'); } }
油门/去抖动可以帮助减less处理程序的调用速度。
你也可以通过注入包含至less一个不可破坏的空间（可能是隐藏的）的div并定期检查它的高度来获得文本大小调整事件和缩放因子。 如果高度发生变化，则文字大小发生了变化（而且您知道还有多less – 顺便说一句，如果窗口以全页模式放大，您也将得到正确的缩放比例，并且高度/身高比例）。
在iOS 10上，可以将事件侦听器添加到touchmove事件，并检测页面是否用当前事件放大。
var prevZoomFactorX; var prevZoomFactorY; element.addEventListener("touchmove", (ev) => { let zoomFactorX = document.documentElement.clientWidth / window.innerWidth; let zoomFactorY = document.documentElement.clientHeight / window.innerHeight; let pageHasZoom = !(zoomFactorX === 1 && zoomFactorY === 1); if(pageHasZoom) { // page is zoomed if(zoomFactorX !== prevZoomFactorX || zoomFactorY !== prevZoomFactorY) { // page is zoomed with this event } } prevZoomFactorX = zoomFactorX; prevZoomFactorY = zoomFactorY; });
<script> var zoomv = function() { if(topRightqs.style.width=='200px){ alert ("zoom"); } }; zoomv(); </script>
我回答了一个3岁的链接，但我想这是一个更可以接受的答案，
创build.css文件为，
@media screen and (max-width: 1000px) { // things you want to trigger when the screen is zoomed }
例如：-
@media screen and (max-width: 1000px) { .classname { font-size:10px; } }
当屏幕放大到大约125％时，上面的代码使字体的大小为“10px”。 您可以通过更改“1000px”的值来检查不同的缩放级别。
