2015/06/01
スマホサイトのブラウザ、デバイスによる表示の違いを無くす方法
スマホサイトを作っていると、iPhoneでは綺麗に見えるのにAndroidだと拡大表示される！などの不具合にぶつかりますよね。
iPhoneはまだいいけど、Androidだと種類は多いし、画面幅も違う、safariやchromeなど複数のブラウザも混在しているし・・・。コーダー泣かせです。
ですが、ニーズにあったviewportの設定を<head></head>の中に記述すれば、ある程度は対応できます。
今回はAndroidのnexus5（ver.5.1）とiPhone5s（iOS8.3）で見え方の検証をしてみました。
デバイスの幅で指定
<meta name="viewport" content="width=device-width">
こちらは、デバイスの幅で表示するという指定です。
この記述にすると表示幅は
Android：縦向き：360px、横向き：598px
iPhone：縦向き：320px、横向き：320px
この時点で横向き表示に差が出ていますね・・・。
Androidは横にしても文字サイズを同じままで表示してくれますが、iPhoneは文字が大きくなっています。（大きくなっているというか、解像度が低いので引き伸ばされている感覚です。）
全ての解像度を同じにしたい時は
<meta name="viewport" content="target-densitydpi=medium-dpi">
こちらは、画面幅関係なく、解像度が固定されます。
この記述にすると表示幅は
Android：縦向き：980px、横向き：980px
iPhone：縦向き：980px、横向き：980px
と統一できました。
ですが、デバイスの問題なのか、物によっては拡大表示されてしまうことも・・・。
ちなみに、解像度を固定したい時は、追加で指定したい横幅を書き足します。
例）横幅を320pxで表示したい時
<meta name="viewport" content="target-densitydpi=medium-dpi,width=320">
こうすることでAndroidでもiPhoneでも幅が320pxで表示されます。
メディアクエリでレスポンシブウェブデザインの記述をするならこちらが便利そう。
横向きの時は解像度を上げたい！とのことでしたら、画面が縦か横かを判定し、それによってviewportを書き換える、というスクリプトを書くのが良いかなと思います。他にもいい方法はあるかもしれません。
結論
制作に取り掛かる前に対象デバイス、ブラウザを定め、それにあったviewportを記述しましょう。
制作途中での確認は必須ですよ！
コーディング業務のご依頼、ご相談の詳細についてはこちらから
最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。
| 次の記事へ | 前の記事へ |
WEB業界ならqam！qam（カム）はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ（コーディング）、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど（読めば読むほど）制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。
