実践！スマホサイトのviewport設定

iPhoneのviewport指定は、なかなかすんなりと予想通りにいかないことが多い鬼門です。iPhoneで、こう指定すれば、こう表示されるだろうという予想をするための考え方を紹介します。

スマートフォン対応サイトといっても、必ずしも「新規」に作るケースばかりではありません。スマートフォン対応サイト制作をいくつかのケースに分けた上で、どのようなviewport指定を採用すべきか考えます。

よく使われるパターンの最後は、リキッド＋ズーム率を等倍に固定してしまうものです。デバイスがどのような方向であっても意図通りの見栄えをキープできるメリットがあります。

既存のPCサイトとは別に、スマートフォンに最適化されたサイトを作る際に検討したいパターンのひとつ「リキッド」パターンを紹介します。サイトをリキッドでデザインする際、おすすめのパターンです。

viewport指定の定番パターンのひとつ「固定」パターンを紹介します。このパターンはPCサイトに少々のコードを追加するだけで、スマートフォン端末に対応させることができます。メリットやデメリットも合わせておさえておきましょう。

viewportを使うための必要知識として、スマートフォン端末の特性や、viewport指定のプロパティを紹介します。

viewportとは普段聞き慣れない言葉です。スマートフォン端末独特のページの表示方法に深くかかわっていて、デスクトップ環境では、意識する必要のなかった概念なのです。まずは、viewportの概念を理解するところからはじめましょう。