devicePixelRatioと画面のサイズ
ピクセルが2倍になった状態で
そのまま文字や画像を表示すると見かけ上のサイズが半分になり
小さく表示される
このため、鮮明な解像度の画面を使うときには
文字や画像を拡大表示することで
ちょうど良い大きさに拡大している
このときに、何倍かするかという値が
window.devicePixelRatio
この値は、iPhone4以降なら 2.0
ほとんどのAndroidなら 1.5
あと、元々の画像の解像の値を
物理値、物理座標といい
修正された値は、
論理値、論理座標という
これは少し面倒だけど
マウスイベントとか、タッチイベントの座標や
cssでの設定は論理座標になるため
Javascriptで制御するときには、論理座標になる
スクリーンに対する情報は
screen.height
screen.availHeight
window.innerHeight
window.outerHeight
などの値から情報を得られる
注意点としては、OSにより値が
物理値か、論理値か変わると言うこと
iOSはすべて論理値なのに、Androidは物理値のものもある
screen.height
画面の高さ
これは、ステータスバーなども含む
Androidでは物理値扱い
screen.availHeight
利用できるスクリーンの高さ
Androidでは物理値
screen.innerHeight
描画領域の内サイズ
どっちも論理値になる
screen.outerHeight
描画領域の外サイズ
Androidでは物理値