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

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

1.viewportとは

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

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

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

2.viewportの設定

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

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

<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no” />

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

width=device-width

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

height

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

initial-scale=1.0

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

minimum-scale=1.0

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

maximum-scale=1.0

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

user-scalable=no

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

【参考】

HTML5のスマホ対応の基礎知識とハマリどころ3選

スマートフォン向けページに最適な meta viewport の指定で迷う

これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ

コメント

  1. […] スマートフォン用サイトのviewportについて – 空想ブログ […]

タイトルとURLをコピーしました