BinaryDevelop
  1. ホーム
  2. ジャバスクリプト

[解決済み】すべてのモダンブラウザでページのズームレベルを検出する方法は？

2022-03-26 04:21:19

質問

  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>

解決方法は？

現在では、この質問が最初にあったときよりもさらに大きな混乱が起きています。私が見つけたすべての回答やブログ記事を読んで、以下に要約します。また、私が設定したのは このページでは、これらすべてのズームレベル測定方法をテストしています。 .

Edit (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 width は CSS ピクセルを使用します。 クアークモードの幅 )
  • FF3.6 : 既知の方法はありません。
  • FF4+ : メディアクエリ バイナリ検索 (下記参照)
  • ウェブキット : https://www.chromestatus.com/feature/5737866978131968 (コメントでTeoさんに感謝)
  • WebKit で div の好ましい大きさを測定します。 -webkit-text-size-adjust:none .
  • ウェブキット : (以降壊れている r72591 ) document.width / jQuery(document).width() (おかげさまで 上記Dirk van Oosterbosch氏 ). デバイスのピクセル数で比率を得るには (デフォルトのズームとの相対値ではなく)、次のようにします。 window.devicePixelRatio .
  • 古いWebKit？ (未検証)です。 parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth (以下 この回答 )
  • オペラ : 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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します