WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

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

device01
device02

この時点で横向き表示に差が出ていますね・・・。
Androidは横にしても文字サイズを同じままで表示してくれますが、iPhoneは文字が大きくなっています。(大きくなっているというか、解像度が低いので引き伸ばされている感覚です。)

全ての解像度を同じにしたい時は

<meta name="viewport" content="target-densitydpi=medium-dpi">

こちらは、画面幅関係なく、解像度が固定されます。
この記述にすると表示幅は

Android:縦向き:980px、横向き:980px
iPhone:縦向き:980px、横向き:980px

device03
device04

と統一できました。
ですが、デバイスの問題なのか、物によっては拡大表示されてしまうことも・・・。
ちなみに、解像度を固定したい時は、追加で指定したい横幅を書き足します。

例)横幅を320pxで表示したい時

<meta name="viewport" content="target-densitydpi=medium-dpi,width=320">

device05
device06

こうすることでAndroidでもiPhoneでも幅が320pxで表示されます。
メディアクエリでレスポンシブウェブデザインの記述をするならこちらが便利そう。
横向きの時は解像度を上げたい!とのことでしたら、画面が縦か横かを判定し、それによってviewportを書き換える、というスクリプトを書くのが良いかなと思います。他にもいい方法はあるかもしれません。

結論

制作に取り掛かる前に対象デバイス、ブラウザを定め、それにあったviewportを記述しましょう。
制作途中での確認は必須ですよ!

最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ