最新のブラウザでページのズームレベルを検出するにはどうすればいいでしょうか？糸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>
ベストアンサー1
今では、この質問が最初に出されたときよりもさらに大きな混乱になっています。私が見つけたすべての回答とブログ投稿を読んで、要約すると次のようになります。また、
このページ
ズームレベルを測定するこれらのすべての方法をテストします。[↑リンク切れ。アーカイブされたコピー→ここ]。
編集(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のみ： /メディアクエリ画面の幅（下記参照）（デバイスピクセルを使用するのに対し、MQ幅はCSSピクセルを使用する
screen.widthという事実を活用しています。screen.widthQuirksmode の幅） - FF3.6 : 既知の方法なし
- FF4+ : メディアクエリバイナリ検索 (下記参照)
- ウェブキット:https://www.chromestatus.com/feature/5737866978131968(コメントのTeoさんに感謝します)
- WebKit : を使用して div の推奨サイズを測定します
-webkit-text-size-adjust:none。 - WebKit : (以降壊れているr72591）
document.width / jQuery(document).width()（感謝ディルク・ファン・オースターボス（上））。デフォルトのズームに対する比率ではなく、デバイスのピクセル単位で比率を取得するには、 を掛けますwindow.devicePixelRatio。 - 古いWebKit? (未検証):
parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth(からこの答え） - Opera :
document.documentElement.offsetWidth/ div の幅position:fixed; width:100%。ここから（Quirksmode の幅テーブルバグだと言っています。innerWidth は CSS px である必要があります。スクロールバーがあるスペースを含むビューポートの幅を取得するために、position:fixed 要素を使用します。document.documentElement.clientWidth はこの幅を除外します。これは 2011 年頃から壊れています。Opera でズーム レベルを取得する方法がもうわかりません。 - 他の：セバスチャンのフラッシュソリューション
- 信頼性が低い: マウスイベントを監視し、screenX の変化 / clientX の変化を測定する
Firefox 4 のバイナリ検索を以下に示します。公開されている変数がわからないためです。
var a = 0.1; // start of the search range
var b = 5; // end of the search range
var maxIter = 20; // maximum number of iterations
var epsilon = 0.01; // tolerance
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);
console.log(mozDevicePixelRatio)
console.log(ff35DevicePixelRatio)<style id=binarysearch></style>
<div id=dummyElement>Dummy element to test media queries.</div>