最初の画面ができた。

PCのブラウザで確認して良い感じになったので、実機のスマホで動かしてみてたのだが、ビックリポン。

表示サイズがやたらとデカイ。

 

widthを100%にしている部分はきちんと表示できているが、固定pixelで指定したところがダメだ。

スマホの画面解像度に合わせて設計したのに何故?

どうやらスマホ開発の初心者が陥る罠にハマってしまったようだ。

切り分けするために、試験用のHTMLを作って表示させてみた。

 

f:id:miyaw:20160127170648p:plain

 

よくよく考えてみるとスマホの横幅が最新のものだと1000px以上とか、これってひと昔のノートPCとさほど変わりない。

これが、このまま手のひらサイズのスマホで表示されたら、文字とか小さ過ぎて見れたもんじゃないだろう。

そこで鍵となるのが、ピクセル密度だ。

javaScriptだとwindow.devicePixelRatioで取得できる。

実際の解像度をピクセル密度で割ったものが実際の表示解像度(という表現は適切でないかもしれん)ということになるようだ。

これによって解像度が異なるスマホも表示解像度はほぼ近しい値になる。

例えば

Xperia Z5は解像度が1080*1701でピクセル密度が3.0

Galaxy Active neoは解像度が480*762でピクセル密度が1.5

これをDENCITY CONVERTERという便利なサイトで計算してやると

表示解像度は

Z5が360*567、Active neoが320*508

となる。

最低幅を320で設計して、中央表示すれば良い感じになりそうだが、Z5の場合は左右の余白が目立つかもしれない。

viewportを駆使すればいい事になりそうな予感もするが、それは今後の課題ということで。