スマートフォンに対応するViewport設定について

今ではスマートフォンが主流になり、ECを含めアクセスのほどんどがスマホからになりつつあります。
世界的な指標においても、スマホからのアクセスがPCからのアクセスを上回ったというニュースも最近あったほどで、仕事ではPCを使うが、家ではスマートフォンを使用する方が多いことを考えれば、個人を目的とした購買に関わるものであれば、ほぼスマホと仮定してもおかしくない時代です。

ただ、スマートフォンも、様々な大きさがあり、画像を作成するにあたっても
Retina対応といった問題をクリアする必要があります。

元々、スマートフォンの横幅といえば 320px(retina対応で640px) というのが定説でしたが、iphone6,iPhone6 Plusなどの画面がどんどんと大きくなり、ウェブページを制作するにあたっても「どのページ幅に合わせていくべきか」、悩むこともあります。
最近ではiphone6sの発売しました。

そこで、今回は、viewportはどう指定するのがベストなのか
考えてみたいと思います。

ビューポート [viewport] の概要

ビューポートとは、携帯端末などのウェブページの表示方法を制御するタグです。ビューポートがないサイトがある場合、スマートフォンなどでサイトを表示させた際、一般的なデスクトップ画面の幅でページを表示します。ビューポートを設定すると、ページの幅やさまざまな端末での拡大縮小を制御できるようになります。

viewportを設定するには

iPhone 5
ブラウザサイズ ：320 × 568 ピクセル
物理的な解像度 ：640 × 1,136
ピクセル解像度 ：326ppi、4インチ

iPhone 6
ブラウザサイズ ：375 × 667 ピクセル
物理的な解像度 ：750 × 1,334
ピクセル解像度 ：326ppi、4.7インチ

iPhone 6 Plus
ブラウザサイズ ：414 × 736 ピクセル
物理的な解像度 ：1,080 × 1,920
ピクセル解像度 ：401ppi、5.5インチ

viewportの指定でできるもの

横幅 – Width

ピクセルで指定 [device-width]
初期値は980px。viewportの横幅の指定です。
指定出来る値は200px〜10000px

縦幅 – height

ピクセルで指定 [device-height]
初期値は「横幅とのアスペスト比から計算される値」。
指定できる値は200px〜10000px

初期のズーム倍率

[initial-scale]
device-width を指定した場合は、初期のズーム倍率が1となります。

最小倍率

[minimum-scale]
最小縮小比率の設定。
デフォルトは 0.25で指定可能範囲は0以上、10まで。

最大倍率

[maximum-scale]
最小拡大比率の設定。
デフォルトは 1.6 で指定可能範囲は0以上、10まで。

ズームの操作

[user-scalable]
ユーザーがズームができるかを設定。
初期値はYes。yes=1,no=0。として指定できる。

viewportの最適な指定方法

Googleが推奨する設定
Googleは、携帯端末に適切に表示されるよう最適化されたページとして、width=device-width、initial-scale=1 を指定したメタビューポートを推奨しています。この推奨している基準を、変えるべきなのか、そのまま使用すべきかを3つのケースから参考します。

【case1】 固定幅を指定する場合
ビューポートは width=320 や width=1024 などの特定の幅に設定できます。この方法は、固定サイズのページを期待どおりに確実に表示するための応急措置として便利ではありますが、おすすめできません。スマホでは最適にサイトを閲覧することができません。

【case2】ズーム操作をさせない
タップでズームをさせない方法もあります。アプリなどズームが出来ない状態のものと同じようにすることができますが、実際にアクセシビリティに悪影響を与えるため、現実的ではありません。

【case3】ズーム倍率をつける
minimum-scale、maximum-scaleを使用すれば、最小および最大ズームを設定することができます。初期値としては、最小比率のデフォルトは 0.25、最大比率のデフォルトは 1.6です。Googleの推奨では、倍率を指定しないほうが良いと記載していますが、最小ズームについては0.25まで小さくしてしまうと、拡大後、元に戻すときに必要以上に小さくしてしまう可能性があり、見えにくい場合があります。ですので、縮小はさせないようにするかたちが最適かと思います。なので、「minimum-scale=1.0」を指定する方が、ユーザー側も見やすいでしょう。

最終的に最適なviewportの設定