在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”的值来检查不同的缩放级别。