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

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア
外村 奈津子
外村 奈津子 | エディター

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア
外村 奈津子
外村 奈津子 | エディター

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア
外村 奈津子
外村 奈津子 | エディター

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア
外村 奈津子
外村 奈津子 | エディター

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア
外村 奈津子
外村 奈津子 | エディター

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア
外村 奈津子
外村 奈津子 | エディター

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア
外村 奈津子
外村 奈津子 | エディター