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

310

  1. 最新のすべてのブラウザでページのズームレベルを検出するにはどうすればよいですか？このスレッドはIE7とIE8でそれを行う方法を示していますが、適切なクロスブラウザーソリューションを見つけることができません。

  2. Firefoxは、将来のアクセスのためにページのズームレベルを保存します。最初のページの読み込みで、ズームレベルを取得できますか？私が読んだどこかで、ページが読み込まれた後にズームが変更されたときに機能します。

  3. '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>
javascript  browser  zoom  detection 
— アンダースタック
ソース
1
基本的に、100％ズームでのDIVのサイズを知りたいです。
— understack
4
基本的に、2019年にズームを検出する方法はありません。MacCatalina上のChrome 78で以下のすべてのソリューションをテストしましたが、どれも機能しませんでした。
— collimarco

回答:

274

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

編集（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/メディアクエリ画面の幅（以下を参照）（screen.widthデバイスピクセルを使用するがMQ幅はCSSピクセルを使用するという事実を利用する-Quirksmode widthsのおかげ）
  • 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：document.documentElement.offsetWidth/ position:fixed; width:100%divの幅。ここから（Quirksmodeの幅の表にバグと記載されています。innerWidthはCSS pxである必要があります）。position：fixed要素を使用して、スクロールバーがあるスペースを含むビューポートの幅を取得します。document.documentElement.clientWidthはこの幅を除外します。これは2011年のいつかから壊れています。Operaでズームレベルを取得する方法はもうわかりません。
  • その他：セバスチャンのフラッシュソリューション
  • 信頼性が低い：マウスイベントをリッスンし、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>
— よんらん
ソース
1
これはIE 8.0.7601.17514（最新）では機能しませんが、非常に素晴らしい作業です。これをすべてのブラウザで機能する単一の関数getZoom（）でラップするチャンスはありますか？おそらくjQueryプラグインとしてもリリースできますか？再び素晴らしい仕事。
— ripper234
1
@yonran great plugin !, IE9では動作しませんが、zoom: screen.deviceXDPI / screen.logicalXDPI,代わりに使用する必要がありますzoom: screen.systemXDPI / screen.logicalXDPI,
— Daniel
1
@RobW、私が初めてFirefox 4用にこれを書いたとき、FirefoxにはありませんでしたmatchMedia。Paul Irishも同様に、Modernizrの一部であるmatchMediaポリフィルを作成しました。
— よんらん
7
皆さん、朗報です！彼らは最終的にそれをやった！Vieport API！chromestatus.com/feature/5737866978131968 私はそれをテストしました、素晴らしいものです！
— Teo
3
ビューポートAPIはピンチズームでのみ機能します。デスクトップでズームすると、スケールは1と表示されます。@ Jason T Featheringham「差別」以外にも、ズームレベルを知りたい理由があります。ズームはドメインのすべてのページで設定されますが、ゲームページや拡張機能のポップアップでは、ヘルプページとは異なる方法でズームを処理したい場合があります。
— Pudica
61

あなたが試すことができます

var browserZoomLevel = Math.round(window.devicePixelRatio * 100);

これにより、Retina以外のディスプレイでのブラウザのズームパーセンテージレベルがわかります。高DPI / Retinaディスプレイの場合、異なる値になります（たとえば、ChromeとSafariでは200、Firefoxでは140）。

使用できるズームイベントをキャッチするには

$(window).resize(function() { 
// your code 
});
— ユーザー1080381
ソース
1
モバイルデバイスでも完璧に動作します。また、どのモバイルデバイスに何があるかを確認することも非常に興味深いdevicePixelRatioです。これは、ズームイベントが発生したとき、または初期値が変化したときに、fixed要素をabsolute適切に配置された要素に切り替えるのにも役立ちましたdevicePixelRatio。パーフェクト！ありがとうございました！！
— lowtechsun 2017年
12
期待どおりに動作しません：ブラウザがズームされていない場合、MacBook on RetinaのChromeで200を返します。
— Terite
19
高DPI画面をサポートするブラウザーは、そのようなディスプレイを使用したときに期待される結果を提供せず、ディスプレイに関係なくSafariも提供しません。
— Fredrik C
気にする人のために、IEではIE11でのみ機能します（IE10以下ではNaNが返されます）
— scunliffe
3
Math.round(window.devicePixelRatio * 100)Chrome、IE、Edge、Firefoxで動作します。iMacのSafariは常に200を返します
— スーパージェイド
45

私にとって、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";
}
— user800583
ソース
1
非常に素晴らしい。Chromeでズームされているかどうかを確認するだけの場合：isZoomed = (screenCssPixelRatio < .98 || screenCssPixelRatio > 1.02)
— ブレントファウスト
1
まあ、window.outerWidthもズームで変更されます。また、すべてのOSでウィンドウの境界の幅が8ピクセルであるとは限りません（同じOSでも、デザインは異なる場合があります）。ただし、ウィンドウの境界が2度あるため、8ではなく16を引くことをお勧めします。また、一部のブラウザーには実際のレンダリングウィンドウ（FFなど）にボーダーがありますが、そうでないブラウザー（Safari）もあります。ただし、ブラウザーを使用するOSによって異なります（たとえば、SafariにはWindowsにボーダーがあります）。最初のinnerWidth（ページの読み込み時など）をバックアップし、それを使用して比較することは、最初のズームが100％である場合にのみより効果的です...
— StanE
1
私にとって何であれ、0を出力します（2017年2月）。
— Tiberiu-Ionuț Stan
1
switchステートメントは、他のifステートメントよりも優れている場合があります。
— エドリック
動作しません。MacのChromeでテストしただけで、ズームレベルに関係なく常に同じ比率が返されます
— collimarco
16

同僚と私はhttps://github.com/tombigel/detect-zoomのスクリプトを使用しました。さらに、動的にsvg要素を作成し、そのcurrentScaleプロパティを確認しました。Chromeで動作し、ほとんどのブラウザでも動作します。FFでは、「テキストのみズーム」機能をオフにする必要があります。SVGはほとんどのブラウザーでサポートされています。この記事の執筆時点では、IE10、FF19、Chrome28でテストされています。

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('version', '1.1');
document.body.appendChild(svg);
var z = svg.currentScale;
... more code ...
document.body.removeChild(svg);
— ジェイ
ソース
このメソッドは、Firefox 29で常にsvg.currentScale = 1を報告するようになりました。おそらく、ズームに基づいて画面全体のサイズを変更するためです。これはバグです。IE11はデスクトップで同じ問題を抱えているようですが、画面の高さがビューポートのdevicePixelRatioに調整されているため、かなり問題があります。
— hexalys 2014年
11

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

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

これを単一行であるIE8 +およびWebkitソリューションと組み合わせると、ほんの数行のコードでアプリにアクセスする大多数のブラウザーでズームを検出できました。

— ブライアン
ソース
4
メディアクエリを使用して実際のズームを検出するコードを提供していただけませんか？
— TN。
"（width：<X> px）and（height：<Y> px）"だけを使用してみてください。<X>と<Y>はそれぞれwindow.innerWidthとwindow.innerHeightです。非常に少量のズームでも機能します。サファリでも動作します。
— 最大
@max JSFIddleまたはこれがどのように組み合わされているかを示すサンプルコードを提供できますか？
— lowtechsun 2017年
Macbook ProなどのRetinaデバイスでは常にtrueを報告します。
— マシューサンダース
codepen.io/anon/pen/LgrGjJは、メディアクエリを使用したバイナリ検索を示していますが、これはクエリと同じdevicePixelRatioです。表示のスケーリングが考慮されます。
— ZachB
11 
zoom = ( window.outerWidth - 10 ) / window.innerWidth

それだけで十分です。

— アレックスフォンソーン
ソース
なぜ引く10からouterWidth？
— カラム
おそらくスクロールバー用です。各スクロールバーも異なります。iOSのように、はるかに小さいです。さらに、このソリューションはクロームのみのようです
— サラ
1
ユーザーがFFのブックマークなどのサイドバーを持っている場合は機能しません
— Gerrit Sedlaczek
7

2016年1月の時点でこれに対する解決策があります。Chrome、Firefox、MS Edgeブラウザーで動作確認済みです。

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

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

手順：

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

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

  2. マウスイベントから4つの測定値をキャプチャします。

    event.clientX, event.clientY, event.screenX, event.screenY

  3. クライアントシステムの2点間の距離d_cを測定する

  4. スクリーンシステムの2点間の距離d_sを測定する

  5. d_c！= d_sの場合、ズームが適用されます。2つの違いは、ズームの量を示します。

注意：距離の計算はめったに行いません。たとえば、前のイベントから遠い新しいマウスイベントをサンプリングできる場合などです。

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

— ユーザー1191311
ソース
1
私はフィドルを作成しました：jsfiddle.net/Terite/9b6ko854「遠く離れている」という意味は100ピクセルです。残念ながら、Retinaディスプレイを搭載したMacBook上のFirefox（52）では不安定に動作します。また、Chrome、Firefox、およびIE11では、ウィンドウ7のインターフェースズーム125％がブラウザズームとして検出されます（デフォルトではズーム125％）。
— Terite
あなたのフィドルは私にとって
— うまくいき
Retinaディスプレイは、とりわけピクセルサイズを誤って報告するため、難易度がさらに高くなります。
— user1191311 2017年
3

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ではズームが存在しないため、ズームを確認する必要はありません。

— ペンチ
ソース
1
面白い。私にとっては、常にズームの80％が表示されます...これは、Windows 7レベルで大きなフォントを設定しているためだと思います（コントロールパネルで「フォントサイズ」を検索してください）。@yonranの回答にあるIE8ソリューションよりもうまくいきませんでした。jsbin.com/obowof
— ripper234
ズームを100％に設定すると、101％になります。
— アレンウォレス
私も。0.9の代わりに0.4999を使用します
— yan bellavance
ieZoomLevel =（（screen.deviceXDPI / screen.systemXDPI）* 100 + 0.4999）.toFixed（）;
— yan bellavance 2016年
3

私が思いついたのは：

1）position:fixed <div>with width:100%（id = zoomdiv）

2）ページが読み込まれるとき：

zoomlevel=$("#zoomdiv").width()*1.0 / screen.availWidth

そしてそれは私のためにctrl+そしてctrl-ズームのために働いた。

または、$(window).onresize()イベントにラインを追加して、アクティブなズームレベルを取得できます

コード：

<script>
    var zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;

    $(window).resize(function(){
        zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;
        alert(zoom);    
    });
</script>
<body>
    <div id=zoomdiv style="width:100%;position:fixed;"></div>
</body>

PS：これは私の最初の投稿です。間違いを許してください。

— アビシェクボラー
ソース
3
残念ながら、これはユーザーがブラウザーを最大化している場合にのみ機能します（screen.availWidthブラウザーウィンドウではなく、画面の幅を画面ピクセルで報告します）。
— ベイリーパーカー
3

これは、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;
— ルドルフリック
ソース
5
document.width未定義を返します
— Adam
ズームに関係なく、常にtrueを返します（2017年2月、Retinaディスプレイ）。
— Tiberiu-Ionuț Stan 2017
3

基本的に、私たちは持っています：

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

通常の UXではこれで十分です。UIデザインが悪い兆候である可能性があるズームレベルを検出する必要がある場合。

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

— キリルイド
ソース
1
window.devicePixelRatioは、主要なブラウザーの最新バージョン
— -Chrome
@kirilloid Safariで「ズームレベル」を確実に見つけるために使用できるものを見つけましたか？
— onassar
1

あなたの計算はまだいくつかのCSSピクセルに基づいています。現在、画面上ではサイズが異なります。それが全ページズームのポイントです。

192dpiデバイスのブラウザーで何をしたいですか？したがって、通常は画像の各ピクセルに対して4つのデバイスピクセルを表示しましたか？50％ズームでは、このデバイスは1つのデバイスピクセルに1つの画像ピクセルを表示します。

— ニール
ソース
@ニール：「CSSピクセル」サイズを取得するにはどうすればよいですか？
— understack
CSSのデフォルトはポイントですが、pxディメンション修飾子を使用してピクセルを指定することもできます。JavaScriptで取得された要素プロパティに関しては、これらは既にCSSピクセル内にあるはずです。したがって、<div>の幅を100pxに指定すると、ズームレベルに関係なく、JavaScriptから返されます。
— ニール、
1

Chromeの場合

var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");
— ニコラ・ギスペンク
ソース
1
ブラウザウィンドウが画面の幅いっぱいにある場合にのみ機能します。
— tenbits
0

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

min-width: 100%

その後 

window.document.width / elem.clientWidth

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

— ダークファンオーステルボッシュ
ソース
これをテストしましたが、ズームインしてもelem.clientWidthが増加しないようです
— Tom
0

これは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 ]
);
— ジュム
ソース
"window.outerWidth / window.innerWidth"で間違った値が表示されるという問題がありましたが、それはおそらくiframeにいるためでした。だから私がしたことは親ウィンドウを使用し、それが正しい答えを与えたことです：window.parent.window.outerWidth / window.parent.window.innerWidth
— yan bellavance
0

私はモバイル向けのこのソリューションを持っています（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());

});

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

— pmrotule
ソース
0

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

デスクトップ、Surface Pro 3、Surface Pro 4で作業しているときに、このコマンドが正しく実行されない場合がありました。

私が見つけたのは、それが自分のデスクトップで機能したことですが、SP3とSP4は互いに、そしてデスクトップとは異なる数値を与えていました。

しかし、SP3が期待していたズームレベルの1.5倍に戻っていることに気づきました。ディスプレイの設定を確認したところ、SP3は実際にはデスクトップの100％ではなく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（％）のズームになります。

— キャメロンウィーバー
ソース
0

現在動作していますが、ブラウザで分離する必要があります。Chrome（75）とSafari（11.1）で正常にテストされました（FFの方法はまだ見つかりません）。Retinaディスプレイで正しいズーム値を取得し、サイズ変更イベントで計算がトリガーされます。

    private pixelRatio() {
      const styleString = "(min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)";
      const chromeRatio = (Math.round((this.window.outerWidth / this.window.innerWidth)*100) / 100);
      const otherRatio = (Math.round(window.devicePixelRatio * 100) / 100);
      const resizeValue = (this.isChrome()) ? chromeRatio : otherRatio;

      return resizeValue || (this.window.matchMedia && this.window.matchMedia(styleString).matches ? 2 : 1) || 1;
    }


  private isChrome():boolean {
    return (!!this.window.chrome && !(!!this.window.opera || this.window.navigator.userAgent.indexOf(' Opera') >= 0))
  }

  private chrome() {
    const zoomChrome = Math.round(((this.window.outerWidth) / this.window.innerWidth)*100) / 100;
    return {
      zoom: zoomChrome,
      devicePxPerCssPx: zoomChrome1 * this.pixelRatio()
    };
  }
— ヨギ
ソース
-1

ここでは変更されません！：

<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では）

@tfl：インラインスタイルで幅を固定したからです。私のケースを表示するようにサンプルを変更しました（元の質問の中に投稿されました）。
— understack
-1

これは誰にとっても役立つかもしれませんし、そうでないかもしれませんが、どの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);
    }
}
— user1054326
ソース
-1

これは昔のように投稿された質問ですが、今日「ズームインとズームアウトのイベントを検出する方法」という同じ回答を探していたところ、すべてのブラウザーに当てはまる回答を見つけることができませんでした。

今のところ：Firefox / Chrome / IE8およびIE9の場合、ズームインおよびズームアウトするとwindow.resizeイベントが発生します。これは、以下を使用してキャプチャできます。

$(window).resize(function() {
//YOUR CODE.
});
— プミ・シンハル
ソース
-1

JavaScriptで純粋にDPPX（ズームレベル）を見つけるためのFireFox 16以降の回避策：

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);
— レクサス
ソース
Retinaディスプレイを搭載したMacBook上のFirefox（52）では期待どおりに機能しません。ズームしていない場合は2を返します。私はフィドルを作成しました：jsfiddle.net/Terite/wadkh3ea
— Terite
-1 
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;
};
— アリ
ソース
6
また、コードの仕組みについても説明してください。これは、初心者が答えを見つけた場合に役立ちます。
— displayName
私はフィドルを作成しました：jsfiddle.net/Terite/5n1bk9do As @AlexeySh。言及されているように、Chrome（56）、Firefox（52）のRetinaディスプレイでは期待どおりに動作しません。また、Safari（10）のズームでは0と表示されます。
— Terite
-1

問題は、使用されているモニターのタイプ、つまり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アプリケーションを使用しているかどうかを検出し、ズーム率の低下を示唆する通知を表示することでした。

— Bill_VA
ソース
Mac Book Pro（Retina画面）のSafariが0を返し、
— Retina
ChromeおよびFirefoxの網膜画面で200を返します
— OZZIE
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.