スマートフォン用サイトのviewportについて

スマートフォン

2013.10.222016.03.26

スマートフォン用サイトを、色々な種類のスマートフォン（OS/機種）できれいに見れるようしたい。
そのために、metaタグに「viewport」を指定する。

1.viewportとは

「viewport」は、スマートフォン用サイトで画面サイズを決定する、仮想的なブラウザウィンドウのようなもの。

AndroidやiPhoneなどのブラウザのサイズを決定する。

viewportを使用することで、端末ごとの差異を気にすることなく、サイトのコンテンツ幅・高さ・拡大・縮小を指定可能となる。

今回は、「横向きにしてもサイズは変わらない、1行に表示する文字数を増やす、ピンチによる拡大・縮小ができない」設定を行なう。

ピンチによる拡大・縮小が「できる」ことが理想だが、まだそのような技術はないらしい・・・

viewportに設定した値については

・表示領域の横幅を指定。デフォルトでは980pxなので、指定しないとどんな機種でも980pxで表示され、画面からページがはみ出す。
・device-widthはデバイスの解像度に合わせてくれる。

・表示領域の縦幅を指定。デフォルトは、width と縦横比から計算される。
・指定なし。

・初期拡大率を指定。デフォルトではページを画面に合わせる。
・1.0は等倍。

・縮小倍率の最低値を設定。ピンチしたときの一番小さくなる倍率のこと。
・1.0は等倍。

・拡大倍率の最大値。ピンチしたときの一番大きくなる倍率のこと。
・1.0は等倍。

・ピンチによる拡大・縮小の許可を指定。
・noはユーザのピンチを許可しない。