web-dev-qa-db-ja.com

JavaScriptでブラウザーの「ズーム」イベントをキャッチする

ユーザーがページのズームを変更したときに、JavaScriptを使用して検出することは可能ですか？ 「ズーム」イベントをキャッチし、それに応答したいだけです（window.onresizeイベントに似ています）。

ありがとう。

javascripteventszoom
149
user123093

ズームがあるかどうかを積極的に検出する方法はありません。ここで、それを実装する方法についての良いエントリを見つけました。

ズームレベルを検出する2つの方法を見つけました。ズームレベルの変更を検出する1つの方法は、パーセンテージ値がズームされないという事実に依存しています。割合の値はビューポートの幅を基準にしているため、ページズームの影響を受けません。 2つの要素を挿入します。1つはパーセンテージでの位置で、もう1つはピクセルでの同じ位置で、ページがズームされるとそれらは離れます。両方の要素の位置間の比率を見つけると、ズームレベルが得られます。テストケースを参照してください。 http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff

上記の投稿のツールを使用して行うこともできます。問題は、あなたが多かれ少なかれ、ページがズームされているかどうかについて経験に基づいた推測をしていることです。これは、一部のブラウザでは他のブラウザよりもうまく機能します。

ズーム中にページが読み込まれた場合、ページがズームされているかどうかを知る方法はありません。

75
Ian Elliott

このJavaScriptを使用して、ズームの「イベント」に反応します。
ウィンドウ幅をポーリングします。 （このページ（Ian Elliottがリンクしている）でいくらか示唆されているように： http://novemberborn.net/javascript/page-zoom-ff[archive] ）

IEではなく、Chrome、Firefox 3.6、およびOperaでテスト済み。

よろしく、マグナス

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);
})();
11
KajMagnus

良いニュース 全員 人によっては！新しいブラウザは、ズームが変更されるとウィンドウサイズ変更イベントをトリガーします。

11
Ben

これは私のために働く：

        var deviceXDPI = screen.deviceXDPI;
        setInterval(function(){
            if(screen.deviceXDPI != deviceXDPI){
                deviceXDPI = screen.deviceXDPI;
                ... there was a resize ...
            }
        }, 500);

IE8でのみ必要です。他のすべてのブラウザーは、当然サイズ変更イベントを生成します。

7
Bill Keese

検出できるyonranから構築された気の利いたプラグインがあります。ここに彼の以前の 回答済み 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
        : "");
}

デモ

3
Starx

私はこの問題を抱えていました。解決策があります。それは簡単で、私にとってはうまくいきます。 （ "Mozilla/5.0（X11; Linux x86_64; Gecko/20100101 Firefox/50.0）。

px比率= css pxに対する物理ピクセルの比率。いずれかがズームすると、ビューポートのピクセルが縮小し、画面にフィットするはずなので、比率を大きくする必要があります。ただし、ウィンドウのサイズ変更では、画面サイズとピクセルが縮小されます。比率が維持されます。

ズーム：windows.resizeイベントのトリガー->およびpx_ratioのサイズ変更の変更：windows.resizeイベントのトリガー-> px_ratioの変更なし

//for zoom detection
px_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;

$(window).resize(function(){isZooming();});

function isZooming(){
    var newPx_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
    if(newPx_ratio != px_ratio){
        px_ratio = newPx_ratio;
        console.log("zooming");
        return true;
    }else{
        console.log("just resizing");
        return false;
    }
}
3
abilogos

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;
});
2
alwe

ウィンドウ幅の変更を追跡することで、以前のソリューションの改善を提案したいと思います。イベントリスナーの独自の配列を保持する代わりに、既存のjavascriptイベントシステムを使用して、幅の変更時に独自のイベントをトリガーし、イベントハンドラーをそれにバインドできます。

$(window).bind('myZoomEvent', function() { ... });

function pollZoomFireEvent() 
{ 

    if ( ... width changed ... ) {
        $(window).trigger('myZoomEvent');
    }
}

Throttle/debounce は、ハンドラーの呼び出し率を減らすのに役立ちます。

2
Alexey

テキストサイズ変更イベントとズームファクターを取得するには、少なくとも分割不可能なスペース（おそらく非表示）を含むdivを挿入し、その高さを定期的にチェックします。高さが変更されると、テキストサイズが変更されます（また、ウィンドウが全ページモードでズームされると、これも発生しますが、同じ高さで正しいズーム率が得られます）高さ比）。

1
Argo
<script>
var zoomv = function() {
  if(topRightqs.style.width=='200px){
  alert ("zoom");
  }
};
zoomv();
</script>
1
SchoolforDesign

これは9年前の質問ですが、問題は解決しません！

プロジェクトのズームを除外しながらサイズ変更を検出しているので、コードを編集して、サイズ変更とズームの両方を排他的に検出できるようにしました。これはmostで動作するので、mostがプロジェクトに十分であれば、これは役立つはずです！これまでにテストした中で、100％のズームを検出します。唯一の問題は、ユーザーがクレイジーになった場合（つまり、ウィンドウのサイズが大幅に変更された場合）またはウィンドウが遅れた場合、ウィンドウのサイズ変更の代わりにズームとして起動する可能性があることです。

window.outerWidthまたはwindow.outerHeightの変更をウィンドウのサイズ変更として検出し、window.innerWidthまたはwindow.innerHeightの変更をズームとしてウィンドウのサイズ変更とは別に検出することで機能します。

//init object to store window properties
var windowSize = {
  w: window.outerWidth,
  h: window.outerHeight,
  iw: window.innerWidth,
  ih: window.innerHeight
};

window.addEventListener("resize", function() {
  //if window resizes
  if (window.outerWidth !== windowSize.w || window.outerHeight !== windowSize.h) {
    windowSize.w = window.outerWidth; // update object with current window properties
    windowSize.h = window.outerHeight;
    windowSize.iw = window.innerWidth;
    windowSize.ih = window.innerHeight;
    console.log("you're resizing"); //output
  }
  //if the window doesn't resize but the content inside does by + or - 5%
  else if (window.innerWidth + window.innerWidth * .05 < windowSize.iw ||
    window.innerWidth - window.innerWidth * .05 > windowSize.iw) {
    console.log("you're zooming")
    windowSize.iw = window.innerWidth;
  }
}, false);

注：私の解決策はKajMagnusのようなものですが、これは私にとってはうまく機能しています。

1
dandeto