ブラウザのズーム検出用の js コード

この記事では主にブラウザのズーム検出用の JS コードを紹介します。必要な方は参考にしてください。

テスト コード

http://jsbin.com/dipijeqi/11

効果:

クローム:

window.devicePixelRatio : 2  (准确)
screen.deviceXDPI / screen.logicalXDPI : NaN
window.outerWidth / window.innerWidth : 2
document.documentElement.offsetHeight / window.innerHeight : 0.020618556701030927 (有相关性)
window.top.outerWidth / window.top.innerWidth : 2

ff:

window.devicePixelRatio : 1.5 (准确)
screen.deviceXDPI / screen.logicalXDPI : NaN
window.outerWidth / window.innerWidth : 1.0114583333333333
document.documentElement.offsetHeight / window.innerHeight : 0.023391812865497075  (有相关性)
window.top.outerWidth / window.top.innerWidth : 1.0114583333333333

ie 8:

window.devicePixelRatio : undefined
screen.deviceXDPI / screen.logicalXDPI : 1.5416666666666667 (大致准确)
window.outerWidth / window.innerWidth : NaN
document.documentElement.offsetHeight / window.innerHeight : NaN
window.top.outerWidth / window.top.innerWidth : NaN

ie11:

window.devicePixelRatio : 1.5 (准确)
screen.deviceXDPI / screen.logicalXDPI : 1.5window.outerWidth / window.innerWidth : 1.0084033613445377document.documentElement.offsetHeight / window.innerHeight : 0.02203856749311295 (有相关性)window.top.outerWidth / window.top.innerWidth : 1.0084033613445377

ie10:

window.devicePixelRatio : undefined
screen.deviceXDPI / screen.logicalXDPI : 1.5 (准确)
window.outerWidth / window.innerWidth : 1.0084033613445377
document.documentElement.offsetHeight / window.innerHeight : 1
window.top.outerWidth / window.top.innerWidth : 1.0084033613445377

ie9:

window.devicePixelRatio : undefined
screen.deviceXDPI / screen.logicalXDPI : 1.5 (准确)
window.outerWidth / window.innerWidth : 1.0084033613445377
document.documentElement.offsetHeight / window.innerHeight : 1
window.top.outerWidth / window.top.innerWidth : 1.0084033613445377

360 6.3 (まったく応答なし):

window.devicePixelRatio : undefined
screen.deviceXDPI / screen.logicalXDPI : 1
window.outerWidth / window.innerWidth : NaN
document.documentElement.offsetHeight / window.innerHeight : NaN
window.top.outerWidth / window.top.innerWidth : NaN

360 高速ブラウザ:

window.devicePixelRatio : 1
screen.deviceXDPI / screen.logicalXDPI : NaN
window.outerWidth / window.innerWidth : 1.5
document.documentElement.offsetHeight / window.innerHeight : 0.015267175572519083
window.top.outerWidth / window.top.innerWidth : 1.5(准确)

Sogou 高速ブラウザ (完全な応答なし):

window.devicePixelRatio : undefined
screen.deviceXDPI / screen.logicalXDPI : 1
window.outerWidth / window.innerWidth : NaN
document.documentElement.offsetHeight / window.innerHeight : NaN
window.top.outerWidth / window.top.innerWidth : NaN

タオバオ ブラウザ:

window.devicePixelRatio : 1
screen.deviceXDPI / screen.logicalXDPI : NaN
window.outerWidth / window.innerWidth : 2.0710059171597632  (大致准确)
document.documentElement.offsetHeight / window.innerHeight : 0.022988505747126436
window.top.outerWidth / window.top.innerWidth : 2.0710059171597632

上記はこの章の全内容です。その他の関連チュートリアルについては、JavaScript ビデオチュートリアル!