181

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

ありがとう。

4

16 に答える 16

81

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

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

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

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

于 2009-06-15T12:59:11.640 に答える
17

朗報みんな人によっては！新しいブラウザーでは、ズームが変更されると、ウィンドウのサイズ変更イベントがトリガーされます。

于 2016-08-09T20:06:55.247 に答える
13

この JavaScript を使用して、Zoom の「イベント」に反応します。
ウィンドウ幅をポーリングします。(このページ (Ian Elliott がリンクしている) で多少示唆されているように: http://novemberborn.net/javascript/page-zoom-ff3 [アーカイブ] )

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);
})();
于 2010-08-29T19:44:24.493 に答える
6

これは私のために働く：

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

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

于 2012-06-26T12:02:00.087 に答える
4

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
        : "");
}

デモ

于 2013-01-20T02:06:44.330 に答える
2

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

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

function pollZoomFireEvent() 
{ 

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

スロットル/デバウンスは、ハンドラーの呼び出し率を下げるのに役立ちます。

于 2011-05-04T11:54:51.417 に答える
1

テキストのサイズ変更イベントとズーム率を取得するには、少なくとも分割できないスペース (おそらく非表示) を含む div を挿入し、その高さを定期的にチェックします。高さが変化すると、テキストのサイズが変化します (そして、あなたはどれだけ知っていますか - これは、ウィンドウがフルページモードでズームされた場合にも発生し、同じ高さで正しいズーム倍率を取得します /身長比）。

于 2011-05-22T00:16:23.400 に答える
1

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

于 2016-11-23T13:34:34.310 に答える
-4

私は 3 年前のリンクに返信していますが、こちらの方がより受け入れやすい回答だと思います。

.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」の値を変更することで、異なるズーム レベルを確認できます。

于 2013-11-04T03:13:56.473 に答える