名古屋栄校です。

さて今回は、スマホ対応の際に必ず出てくるviewportについて、とりあえずおまじないのように記述している方も多いと思いますので、しっかり学んでもらえる回にしたいと思います。

まずはスマホを用意して下さい。
おお、準備いいですね、すばらしいです。

 

じゃ～ん、電卓でしたぁ～笑

 
というわけで、スマホも電卓も要らない内容ですので、安心して下さい。

viewportとは？

スマホやタブレット端末などでWEBページを表示する際の表示方法を制御するものがviewportになります。この設定が無いページをスマホなどで閲覧すると、PCサイトそのままの形で表示されます。
viewportを設定することで、デバイスの幅に合わせたり、拡大縮小をコントロールできるようになります。

content属性の中身

一般的には、head要素の中に、

<meta name="viewport" content="width=device-width,initial-scale=1">

のように記述することが多いようですが、content属性の中身について、きちんと理解しておきましょう。

◆ width
ピクセル指定（width=480など）も可能ですが、Google Developersなどでは推奨されていません。
device-widthを指定することでデバイスに依存しないピクセルサイズで表示されるようになります。つまり、【どのデバイスにも対応する幅】ということになります。

◆ initial-scale
スマホやタブレットなどに最初にページを表示する時の表示倍率を指定します。
initial-scale=1であれば、等倍表示ということになります。

◆ minimum-scale
ピンチイン（縮小表示）した際の最小倍率を指定します。
minimum-scale=0.5であれば、1/2サイズまで縮小可能ということになります。
また、initial-scale=1,minimum-scale=1とすることで、縮小できなくすることも可能です。
Google Developersなどでは推奨されていません。

◆ maximum-scale
ピンチアウト（拡大表示）した際の最大倍率を指定します。
maximum-scale=1.5であれば、1.5倍まで拡大可能ということになります。
また、initial-scale=1,maximum-scale=1とすることで、拡大できなくすることも可能です。
Google Developersなどでは推奨されていません。

◆ user-scalable
ユーザーが拡大縮小の操作をできるかどうかの設定です。
user-scalable=1または、user-scalable=yesで、拡大縮小可能。
user-scalable=0または、user-scalable=noで、操作不可となります。
こちらもGoogle Developersなどでは推奨されていません。

user-scalableについて

iPhoneのSafariは、フォームにフォーカスが当たる（入力項目をタップする）と、ページ全体が拡大される仕様になっています。Google Developersのとおりに対応してしまうと、逆にアクセシビリティが悪化してしまう恐れがあります。
これを防ぐためには、maximum-scale=1,user-scalable=noを設定します。

まとめ

Google Developersにおいても、maximum-scaleやuser-scalableの使用について明確に非推奨としているわけではありませんので、必要に応じて使い分けましょう。
スマホ・タブレット対応がきちんとされているサイトデザインであれば、拡大縮小の必要が無いと思いますので、その場合は、

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

としておけば拡大縮小されなくなります。

オススメ講座

Webデザイナー PRO
ソフトウェアの使い方からWEBサイト制作まで、しっかりマスターできるコースです。もちろんスマホ対応についてもしっかり学べます。