iPhone用サイトの画面サイズ

スマートフォンサイトを制作するとき
まず疑問に思うのは横幅はどれくらい???

ということだと思います。

ほとんどの人がそんな時、ネットで検索し、
「viewport」というmeta要素を加えればよい。
という答えが見つかると思います。

というわけでここでも「viewport」について
なるべくわかりやすく説明したいと思います。

iPhone 3Gで「viewport」を何も設定されていないサイトを
見たとき、横幅は980ピクセルで表示されます。

実際のiPhoneの画面横幅のサイズ(縦の時)は320pxです。
ちなみに横にしたときは480px。

なので、これでは普通のサイトでは文字が小さすぎて読めません。
拡大したり、スクロールしたりして読むしかないのです。。

というわけで、こんな不便なことにならないように、
デフォルトで何ピクセルで横幅を表示するか、、、
という設定をする役割が
「viewport」の役割なのです。

例えば、、、
iPhoneのサイズ320pxで設定する場合は以下の分をhead間に加えます。

<meta name=”viewport” content=”width=320, initial-scale=1.0,
user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0, “>

各要素を解説すると
・width 横幅
・initial-scale 倍率の初期値
・user-scalable 拡大縮小の可否
・maximum-scale 倍率の最大値
・minimum-scale 倍率の最小値

このmeta文を加え、iPhone用サイトを320pxを基準に制作すれば
問題ないように思えますが、、、

横向きにしたときのことも考えて
widthの値にはdevice-width
という、デバイスのサイズが変わったときでも、対応できる値があります。

つまり

<meta name=”viewport” content=”width=device-width, initial-scale=1.0,
user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0, “>

というmeta文を加え320pxを想定して制作していくのが
iPhoneサイト制作ではよいでしょう。

今日はこの辺で。。。
また次回!

——————————————————————-
ホームページ制作(スマートフォンサイト,WordpressなどのCMS、ECサイト対応)
ホームページ更新代行・運営管理
ご相談はお気軽にお問合せください。
■お問合せフォーム
——————————————————————-



About Grand License

Webサイト構築
スマートフォンサイト構築
Webサイト更新代行
など、手軽にスタイリッシュなサイトを制作したいお客様をお手伝いいたします。

Twitter