javascript - 最新のすべてのブラウザでページズームレベルを検出するにはどうすればよいですか？

Question

最新のすべてのブラウザでページズームレベルを検出するにはどうすればよいですか？このスレッドはIE7とIE8でそれを行う方法を説明していますが、私は良いクロスブラウザーソリューションを見つけることができません。
Firefoxは、将来のアクセスのためにページズームレベルを保存します。最初のページの読み込み時に、ズームレベルを取得できますか？どこかで読んだところによると、ページが読み込まれた後にズームが変更されたときに機能します。
'zoom'イベントをトラップする方法はありますか？

私の計算のいくつかはピクセルベースであり、ズームすると変動する可能性があるため、これが必要です。

@tflによって与えられた変更されたサンプル

このページは、ズームするとさまざまな高さの値を警告します。[jsFiddle]

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"/></script>
    </head>
    <body>
        <div id="xy" style="border:1px solid #f00; width:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin tortor in lacus tincidunt volutpat. Integer dignissim imperdiet mollis. Suspendisse quis tortor velit, placerat tempor neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent bibendum auctor lorem vitae tempor. Nullam condimentum aliquam elementum. Nullam egestas gravida elementum. Maecenas mattis molestie nisl sit amet vehicula. Donec semper tristique blandit. Vestibulum adipiscing placerat mollis.</div>
        <button onclick="alert($('#xy').height());">Show</button>
    </body>
</html>

score 291 · Accepted Answer

今では、この質問が最初に尋ねられたときよりもさらに大きな混乱になっています。私が見つけたすべての回答とブログ投稿を読んだことから、ここに要約があります。また、ズームレベルを測定するこれらすべての方法をテストするために、このページを設定しました。

編集（2011-12-12）：クローンを作成できるプロジェクトを追加しました：https ：//github.com/tombigel/detect-zoom

IE8：（screen.deviceXDPI / screen.logicalXDPIまたは、デフォルトのズームに対するズームレベルの場合screen.systemXDPI / screen.logicalXDPI）
IE7 :(この例またはこの回答var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth;に感謝します）
FF3.5のみ：screen.width/メディアクエリ画面の幅（以下を参照）（デバイスピクセルを使用するが、MQ幅はCSSピクセルを使用するという事実を利用します-Quirksmode幅screen.widthのおかげで）
FF3.6：既知の方法はありません
FF4 +：メディアクエリのバイナリ検索（以下を参照）
WebKit：https ://www.chromestatus.com/feature/5737866978131968 （コメントのTeoに感謝します）
WebKit：divの推奨サイズを。で測定し-webkit-text-size-adjust:noneます。
WebKit :( r72591以降壊れています）document.width / jQuery(document).width()（上記のDirk van Oosterboschに感謝します）。（デフォルトのズームではなく）デバイスピクセルの比率を取得するには、を掛けwindow.devicePixelRatioます。
古いWebKit？（未確認）:(この回答parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidthから）
Opera： / divdocument.documentElement.offsetWidthの幅。ここから（Quirksmodeのwidthsテーブルにはバグがあると記載されています。innerWidthはCSS pxである必要があります）。position：fixed要素を使用して、スクロールバーがあるスペースを含むビューポートの幅を取得します。document.documentElement.clientWidthは、この幅を除外します。これは2011年のいつかから壊れています。Operaでズームレベルを取得する方法はもうわかりません。position:fixed; width:100%
その他：セバスチャンのフラッシュソリューション
信頼性が低い：マウスイベントをリッスンし、screenXの変化/clientXの変化を測定します

Firefox 4のバイナリ検索は、公開されている変数がわからないためです。

<style id=binarysearch></style>
<div id=dummyElement>Dummy element to test media queries.</div>
<script>
var mediaQueryMatches = function(property, r) {
  var style = document.getElementById('binarysearch');
  var dummyElement = document.getElementById('dummyElement');
  style.sheet.insertRule('@media (' + property + ':' + r +
                         ') {#dummyElement ' +
                         '{text-decoration: underline} }', 0);
  var matched = getComputedStyle(dummyElement, null).textDecoration
      == 'underline';
  style.sheet.deleteRule(0);
  return matched;
};
var mediaQueryBinarySearch = function(
    property, unit, a, b, maxIter, epsilon) {
  var mid = (a + b)/2;
  if (maxIter == 0 || b - a < epsilon) return mid;
  if (mediaQueryMatches(property, mid + unit)) {
    return mediaQueryBinarySearch(
        property, unit, mid, b, maxIter-1, epsilon);
  } else {
    return mediaQueryBinarySearch(
        property, unit, a, mid, maxIter-1, epsilon);
  }
};
var mozDevicePixelRatio = mediaQueryBinarySearch(
    'min--moz-device-pixel-ratio', '', a, b, maxIter, epsilon);
var ff35DevicePixelRatio = screen.width / mediaQueryBinarySearch(
    'min-device-width', 'px', 0, 6000, 25, .0001);
</script>

score 50 · Accepted Answer

私にとって、Chrome/Webkit ではdocument.width / jQuery(document).width()うまくいきませんでした。ウィンドウを小さくしてサイトにズームインすると、水平スクロールバーが表示document.width / jQuery(document).width()され、デフォルトのズームでは 1 になりませんでした。これはdocument.width、ドキュメントの一部がビューポートの外に含まれているためです。

使用window.innerWidthしてwindow.outerWidth働いた。何らかの理由で、Chrome では、outerWidth は画面ピクセルで測定され、innerWidth は css ピクセルで測定されます。

var screenCssPixelRatio = (window.outerWidth - 8) / window.innerWidth;
if (screenCssPixelRatio >= .46 && screenCssPixelRatio <= .54) {
  zoomLevel = "-4";
} else if (screenCssPixelRatio <= .64) {
  zoomLevel = "-3";
} else if (screenCssPixelRatio <= .76) {
  zoomLevel = "-2";
} else if (screenCssPixelRatio <= .92) {
  zoomLevel = "-1";
} else if (screenCssPixelRatio <= 1.10) {
  zoomLevel = "0";
} else if (screenCssPixelRatio <= 1.32) {
  zoomLevel = "1";
} else if (screenCssPixelRatio <= 1.58) {
  zoomLevel = "2";
} else if (screenCssPixelRatio <= 1.90) {
  zoomLevel = "3";
} else if (screenCssPixelRatio <= 2.28) {
  zoomLevel = "4";
} else if (screenCssPixelRatio <= 2.70) {
  zoomLevel = "5";
} else {
  zoomLevel = "unknown";
}

score 12 · Accepted Answer

この記事は非常に役に立ちました。yonran に感謝します。彼が提供したテクニックのいくつかを実装する際に見つけた追加の学習を伝えたいと思いました. FF6 と Chrome 9 では、JS からのメディアクエリのサポートが追加されました。これにより、FF でズームを決定するために必要なメディアクエリアプローチが大幅に簡素化されます。MDN hereのドキュメントを参照してください。私の目的では、ブラウザがズームインまたはズームアウトされているかどうかを検出するだけでよく、実際のズーム率は必要ありませんでした。JavaScript の 1 行で答えを得ることができました。

var isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;

これを IE8+ と Webkit のソリューション (これも 1 行でした) と組み合わせることで、わずか数行のコードでアプリにアクセスするブラウザーの大部分でズームを検出することができました。

score 7 · Accepted Answer

2016 年 1 月現在、これに対する解決策があります。Chrome、Firefox、および MS Edge ブラウザーでの動作がテストされています。

原則は以下の通りです。離れた 2 つの MouseEvent ポイントを収集します。各マウスイベントには、画面とドキュメントの座標が付属しています。両方の座標系で 2 点間の距離を測定します。ブラウザーの設定により、座標系間に可変の固定オフセットがありますが、ページがズームされていない場合、ポイント間の距離は同じである必要があります。「遠く離れた」(私はこれを 12 ピクセルとしています) を指定する理由は、ズームの小さな変化 (90% または 110% など) を検出できるようにするためです。

参照: https://developer.mozilla.org/en/docs/Web/Events/mousemove

手順:

マウス移動リスナーを追加する

window.addEventListener("mousemove", function(event) {
    // handle event
});

マウスイベントから 4 つの測定値をキャプチャします。
```
event.clientX, event.clientY, event.screenX, event.screenY
```
クライアントシステムの 2 点間の距離 d_c を測定します
スクリーンシステムの 2 点間の距離 d_s を測定します
d_c != d_s の場合、ズームが適用されます。2 つの違いは、ズームの量がわかります。

注意: 距離の計算はめったに行わないでください。たとえば、以前のマウスイベントとはかけ離れた新しいマウスイベントをサンプリングできる場合などです。

制限: ユーザーがマウスを少なくとも少し動かすと想定し、ズームはこの時点まで認識できません。

score 4 · Accepted Answer

基本的に、次のものがあります。

window.devicePixelRatioこれは、ブラウザーレベルのズーム* とシステムのズーム/ピクセル密度の両方を考慮に入れています。
* — Mac/Safari ではズームレベルは考慮されません
メディアクエリ
vw/ vhCSSユニット
resizeズームレベルの変更時にトリガーされるイベントにより、ウィンドウの有効サイズが変更されます。

通常のUXにはこれで十分です。ズームレベルを検出する必要がある場合は、UI デザインが悪いことを示している可能性があります。

ピッチズームは追跡が難しく、現在考慮されていません。

score 3 · Accepted Answer

これは、Webkit ベースのブラウザー (Chrome、Safari) でうまく機能しました。

function isZoomed() {
    var width, mediaQuery;

    width = document.body.clientWidth;
    mediaQuery = '(max-width: ' + width + 'px) and (min-width: ' + width + 'px)';

    return !window.matchMedia(mediaQuery).matches;
}

ただし、Firefoxでは機能しないようです。

これは WebKit でも機能します。

var zoomLevel = document.width / document.body.clientWidth;

score 3 · Accepted Answer

Internet Explorer 7、8、および 9 では、次のように動作します。

function getZoom() {
    var screen;

    screen = document.frames.screen;
    return ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.9).toFixed();
}

丸め誤差を防ぐために「+0.9」が追加されます (そうしないと、ブラウザのズームがそれぞれ 105% と 110% に設定されている場合に 104% と 109% になります)。

IE6 にはズームが存在しないため、ズームを確認する必要はありません。

score 0 · Accepted Answer

IEでこれをテストしませんでしたがelem、

min-width: 100%

それから

window.document.width / elem.clientWidth

ブラウザのズームレベル（document.body.style.zoom係数を含む）が表示されます。

score 0 · Accepted Answer

Your calculations are still based on a number of CSS pixels. They're just a different size on the screen now. That's the point of full page zoom.

What would you want to happen on a browser on a 192dpi device which therefore normally displayed four device pixels for each pixel in an image? At 50% zoom this device now displays one image pixel in one device pixel.

score 0 · Accepted Answer

モバイル専用のこのソリューションがあります（Androidでテスト済み）：

jQuery(function($){

zoom_level = function(){

    $("body").prepend('<div class="overlay" ' +
                'style="position:fixed; top:0%; left:0%; ' +
                'width:100%; height:100%; z-index:1;"></div>');

    var ratio = $("body .overlay:eq(0)").outerWidth() / $(window).width();
    $("body .overlay:eq(0)").remove();

    return ratio;
}

alert(zoom_level());

});

ピンチムーブの直後にズームレベルが必要な場合は、レンダリングの遅延のために、おそらく少しタイムアウトを設定する必要があります (ただし、テストしていないためわかりません)。

score 0 · Accepted Answer

スケールを検出します。

html コード:

<body id="blog">

js:

function scale(){
return Math.round(100/(d.getElementById('blog').offsetWidth/d.getElementById('blog').getBoundingClientRect().width))/100;
}

ズーム倍率とスケールを混同しないでください。ユーザーは「ズーム」を制御します。「スケール」は CSS 変換です。しかし、11 年と 10 か月前、understackは次のように述べています。

基本的に、100% ズームでの DIV の寸法を知りたいです。

これはそれを行います。@media クエリと組み合わせて使用して、JavaScript デバイスのスケーリングを検出します。つまり、360x720 は 0.5 スケーリングを適用する可能性があります。720x360、0.75。

var d=document;

score 0 · Accepted Answer

これはChrome用です。user800583の回答を受けて...

私はこの問題に数時間を費やしましたが、より良いアプローチは見つかりませんでしたが:

「zoomLevel」は 10 ではなく 16 あります
Chrome がフルスクリーン/最大化されている場合の比率はwindow.outerWidth/window.innerWidthであり、そうでない場合の比率はのように見えますが(window.outerWidth-16)/window.innerWidth、1 番目のケースは 2 番目のケースで近づくことができます。

だから私は次のようになりました...

ただし、このアプローチには制限があります。たとえば、アプリケーションウィンドウでアコーディオンを演奏すると (ウィンドウの幅を急速に拡大および縮小する)、ズームは変更されていませんが (outerWidth と innerWidth が変更されていない可能性があります)、ズームレベル間にギャップが生じます。正確に同時に更新されます）。

var snap = function (r, snaps)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return i; }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
);

因子が必要な場合：

var snap = function (r, snaps, ratios)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return eval(ratios[i]); }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
            [ 0.25, '1/3', 0.5, '2/3', 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5 ]
);

score 0 · Accepted Answer

この回答は、user1080381 の回答で devicePixelRatio が正しく返されないというコメントに基づいています。

デスクトップ、Surface Pro 3、および Surface Pro 4 で作業している場合にも、このコマンドが正しく返されない場合があることがわかりました。

私のデスクトップでは機能しましたが、SP3 と SP4 は互いに、またデスクトップとは異なる数値を示していました。

SP3 が、期待していたズームレベルの 1.5 倍に戻っていることに気付きました。ディスプレイの設定を見てみると、デスクトップの 100% ではなく、実際には SP3 が 150% に設定されていました。

したがって、コメントに対する解決策は、返されたズームレベルを現在使用しているマシンのスケールで割ることです。

次のようにして、Windows設定でスケールを取得できました。

ManagementObjectSearcher searcher = new ManagementObjectSearcher("SELECT * FROM Win32_DesktopMonitor");
double deviceScale = Convert.ToDouble(searcher.Get().OfType<ManagementObject>().FirstOrDefault()["PixelsPerXLogicalInch"]);
int standardPixelPerInch = 96;
return deviceScale / standardPixelPerInch;

私の SP3 の場合、これはこのコードが 100% ズームでどのように見えるかです:

devicePixelRatio = 1.5
deviceScale = 144
deviceScale / standardPixelPerInch = 1.5
devicePixelRatio / (deviceScale / standardPixelPerInch) = 1

user1080381 の元の回答に 100 を掛けると、100 (%) のズームが得られます。

score -1 · Accepted Answer

これはだれにも役立つかもしれないし、役に立たないかもしれませんが、Cssのトリックを試しても正しく中央に配置できないページがあったので、センターページを呼び出すJQueryファイルを作成しました。

ブラウザのズームレベルで問題が発生しました。100％、125％、150％などに基づいてページがシフトします。

以下のコードは、centerpage.jsというJQueryファイルにあります。

マスターページにはすでにJQueryへのリンクがありますが、ページからJQueryとこのファイルにリンクして機能させる必要がありました。

<title>Home Page.</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/centerpage.js"></script>

centerpage.js：

// centering page element
function centerPage() {
    // get body element
    var body = document.body;

    // if the body element exists
    if (body != null) {
        // get the clientWidth
        var clientWidth = body.clientWidth;

        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var left = (windowWidth - bodyWidth) / 2;

        // this is a hack, but it works for me a better method is to determine the 
        // scale but for now it works for my needs
        if (left > 84) {
            // the zoom level is most likely around 150 or higher
            $('#MainBody').removeClass('body').addClass('body150');
        } else if (left < 100) {
            // the zoom level is most likely around 110 - 140
            $('#MainBody').removeClass('body').addClass('body125');
        }
    }
}


// CONTROLLING EVENTS IN jQuery
$(document).ready(function() {
    // center the page
    centerPage();
});

また、パネルを中央に配置する場合：

// centering panel
function centerPanel($panelControl) {
    // if the panel control exists
    if ($panelControl && $panelControl.length) {
        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var panelHeight = $panelControl.height();
        var panelWidth = $panelControl.width();

        // centering
        $panelControl.css({
            'position': 'absolute',
            'top': (windowHeight - panelHeight) / 2,
            'left': (windowWidth - panelWidth) / 2
        });

        // only need force for IE6
        $('#backgroundPanel').css('height', windowHeight);
    }
}

score -1 · Accepted Answer

これは何年も前に投稿された質問ですが、今日、「ズームインおよびズームアウトイベントを検出する方法」という同じ回答を探していたときに、すべてのブラウザーに適合する回答が 1 つ見つかりませんでした。

現在と同様: Firefox/Chrome/IE8 および IE9 の場合、ズームインとズームアウトにより window.resize イベントが発生します。これは、次を使用してキャプチャできます。

$(window).resize(function() {
//YOUR CODE.
});

score -1 · Accepted Answer

FireFox 16+ が JavaScript だけで DPPX (ズームレベル) を検出するための回避策:

var dppx = (function (precision) {
  var searchDPPX = function(level, min, divisor) {
    var wmq = window.matchMedia;
    while (level >= min && !wmq("(min-resolution: " + (level/divisor) + "dppx)").matches) {
      level--;
    }
    return level;
  };

  var maxDPPX = 5.0; // Firefox 22 has 3.0 as maximum, but testing a bit greater values does not cost much
  var minDPPX = 0.1; // Firefox 22 has 0.3 as minimum, but testing a bit smaller values does not cost anything
  var divisor = 1;
  var result;
  for (var i = 0; i < precision; i++) {
    result = 10 * searchDPPX (maxDPPX, minDPPX, divisor);
    maxDPPX = result + 9;
    minDPPX = result;
    divisor *= 10;
  }

  return result / divisor;
}) (5);

score -1 · Accepted Answer

問題は、使用するモニターの種類 (4k モニターと標準モニター) にあります。Chrome は、を使用するだけでズームレベルを知ることができる点で群を抜いてスマートですwindow.devicePixelRatio。どうやら、ピクセル密度が何であるかを知ることができ、何の問題もなく同じ数値を報告することができます。

他のブラウザでは、それほど多くはありません。IE と Edge は、ズームレベルの処理が大きく異なるため、おそらく最悪です。4k モニターで同じサイズのテキストを取得するには、標準モニターで 100% ではなく 200% を選択する必要があります。

2018 年 5 月の時点で、いくつかの最も人気のあるブラウザー、Chrome、Firefox、および IE11 のズームレベルを検出するために必要なものは次のとおりです。ズームのパーセンテージを教えてもらいました。IE の場合、実際には 200% の 4k モニターでも 100% と報告されますが、テキストサイズは実際には同じです。

ここにフィドルがあります：https://jsfiddle.net/ae1hdogr/

誰かが他のブラウザを試してフィドルを更新したい場合は、そうしてください。私の主な目標は、これら 3 つのブラウザーをカバーして、ユーザーが 100% を超えるズーム率を使用して Web アプリケーションを使用しているかどうかを検出し、ズーム率が低いことを示唆する通知を表示することでした。

score -2 · Accepted Answer

ここでは変更されません!:

<html>
 <head>
  <title></title>
 </head>
<body>
 <div id="xy" style="width:400px;">
  foobar
 </div>
 <div>
  <button onclick="alert(document.getElementById('xy').style.width);">Show</button>
 </div>
</body>
</html>

シンプルな html ファイルを作成し、ボタンをクリックします。ズームレベルに関係なく: 400px の幅が表示されます (少なくとも firefox と ie8 では)。

score -3 · Accepted Answer

function supportFullCss3()
{
    var div = document.createElement("div");
    div.style.display = 'flex';
    var s1 = div.style.display == 'flex';
    var s2 = 'perspective' in div.style;

    return (s1 && s2);
};

function getZoomLevel()
{
    var screenPixelRatio = 0, zoomLevel = 0;

    if(window.devicePixelRatio && supportFullCss3())
        screenPixelRatio = window.devicePixelRatio;
    else if(window.screenX == '0')
        screenPixelRatio = (window.outerWidth - 8) / window.innerWidth;
    else
    {
        var scr = window.frames.screen;
        screenPixelRatio = scr.deviceXDPI / scr.systemXDPI;
    }

    //---------------------------------------
    if (screenPixelRatio <= .11){ //screenPixelRatio >= .01 &&
      zoomLevel = "-7";
    } else if (screenPixelRatio <= .25) {
      zoomLevel = "-6";
    }else if (screenPixelRatio <= .33) {
      zoomLevel = "-5.5";
    } else if (screenPixelRatio <= .40) {
      zoomLevel = "-5";
    } else if (screenPixelRatio <= .50) {
      zoomLevel = "-4";
    } else if (screenPixelRatio <= .67) {
      zoomLevel = "-3";
    } else if (screenPixelRatio <= .75) {
      zoomLevel = "-2";
    } else if (screenPixelRatio <= .85) {
      zoomLevel = "-1.5";
    } else if (screenPixelRatio <= .98) {
      zoomLevel = "-1";
    } else if (screenPixelRatio <= 1.03) {
      zoomLevel = "0";
    } else if (screenPixelRatio <= 1.12) {
      zoomLevel = "1";
    } else if (screenPixelRatio <= 1.2) {
      zoomLevel = "1.5";
    } else if (screenPixelRatio <= 1.3) {
      zoomLevel = "2";
    } else if (screenPixelRatio <= 1.4) {
      zoomLevel = "2.5";
    } else if (screenPixelRatio <= 1.5) {
      zoomLevel = "3";
    } else if (screenPixelRatio <= 1.6) {
      zoomLevel = "3.3";
    } else if (screenPixelRatio <= 1.7) {
      zoomLevel = "3.7";
    } else if (screenPixelRatio <= 1.8) {
      zoomLevel = "4";
    } else if (screenPixelRatio <= 1.9) {
      zoomLevel = "4.5";
    } else if (screenPixelRatio <= 2) {
      zoomLevel = "5";
    } else if (screenPixelRatio <= 2.1) {
      zoomLevel = "5.2";
    } else if (screenPixelRatio <= 2.2) {
      zoomLevel = "5.4";
    } else if (screenPixelRatio <= 2.3) {
      zoomLevel = "5.6";
    } else if (screenPixelRatio <= 2.4) {
      zoomLevel = "5.8";
    } else if (screenPixelRatio <= 2.5) {
      zoomLevel = "6";
    } else if (screenPixelRatio <= 2.6) {
      zoomLevel = "6.2";
    } else if (screenPixelRatio <= 2.7) {
      zoomLevel = "6.4";
    } else if (screenPixelRatio <= 2.8) {
      zoomLevel = "6.6";
    } else if (screenPixelRatio <= 2.9) {
      zoomLevel = "6.8";
    } else if (screenPixelRatio <= 3) {
      zoomLevel = "7";
    } else if (screenPixelRatio <= 3.1) {
      zoomLevel = "7.1";
    } else if (screenPixelRatio <= 3.2) {
      zoomLevel = "7.2";
    } else if (screenPixelRatio <= 3.3) {
      zoomLevel = "7.3";
    } else if (screenPixelRatio <= 3.4) {
      zoomLevel = "7.4";
    } else if (screenPixelRatio <= 3.5) {
      zoomLevel = "7.5";
    } else if (screenPixelRatio <= 3.6) {
      zoomLevel = "7.6";
    } else if (screenPixelRatio <= 3.7) {
      zoomLevel = "7.7";
    } else if (screenPixelRatio <= 3.8) {
      zoomLevel = "7.8";
    } else if (screenPixelRatio <= 3.9) {
      zoomLevel = "7.9";
    } else if (screenPixelRatio <= 4) {
      zoomLevel = "8";
    } else if (screenPixelRatio <= 4.1) {
      zoomLevel = "8.1";
    } else if (screenPixelRatio <= 4.2) {
      zoomLevel = "8.2";
    } else if (screenPixelRatio <= 4.3) {
      zoomLevel = "8.3";
    } else if (screenPixelRatio <= 4.4) {
      zoomLevel = "8.4";
    } else if (screenPixelRatio <= 4.5) {
      zoomLevel = "8.5";
    } else if (screenPixelRatio <= 4.6) {
      zoomLevel = "8.6";
    } else if (screenPixelRatio <= 4.7) {
      zoomLevel = "8.7";
    } else if (screenPixelRatio <= 4.8) {
      zoomLevel = "8.8";
    } else if (screenPixelRatio <= 4.9) {
      zoomLevel = "8.9";
    } else if (screenPixelRatio <= 5) {
      zoomLevel = "9";
    }else {
      zoomLevel = "unknown";
    }

    return zoomLevel;
};

javascript - 最新のすべてのブラウザでページズームレベルを検出するにはどうすればよいですか？

29 に答える 29

Related

Reference