ガレコレ [Garage Collection]
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です。
 
お問い合わせ


by Network Communication Note