2018年6月21日(木)
[JavaScript] window.devicePixelRatio #HTML5&CSS3&JavaScript
ブラウザの倍率を割り出すのに、ついこの間まで苦労していました。devicePixelRatioが、すべてのブラウザで利用できるようになっています。これは、朗報です。
パソコンでは、ブラウザにおける拡大率に相当します。スマホでは、拡大表示していても不変で、機器のピクセル数/表示ポイント数です。タブレットは、おそらく、スマホと同じでしょう。つまり、devicePixelRatioの意味合いが、デバイスにより異なります。実装には、スマホ&タブレット/パソコン分岐処理が必要です。
パソコンにおいて詳しく見てみると、関連しているinnerWidthとouterWidthの挙動が、ブラウザによって異なっています。
--
パソコン機器の解像度1366x768
ブラウザを最大化したときの挙動
windiow.outerWidth(不変)
─
Edge IE11 Chrome Firefox Opera
1382 1382 1366 1382 1366
何故、Edge, IE11, Firefoxでは1382x784になるのかは不明。
windiow.innerWidth
─
Edge IE11 Chrome Firefox Opera
0.50:2732(すべて)
0.75:1821 1821 1821 - 1821
1.00:1366(すべて)
1.25:1093 1093 1093 - 1093
1.50: 911(すべて)
1.75: 781 781 780 - 780
2.00: 683(すべて)
1.75倍のとき、780.57を小数点以下四捨五入すれば781ですが、何故、Chrome, Operaでは780になるのかは不明。
--
つまり、1ピクセルもずれないようにするには、innerWidthを使う必要があります。
※下記は、あとで追記します。
screen.width
screen.height
screen.availWidth
screen.availHeight
document.documentElement.clientWidth
document.documentElement.clientHeight
P.S. ちなみに、iPhone5c(iOS10)では window.innerWidthは不変で正確に出ますが、window.outerWidthは不変で0です。