スマホ用サイトでは画面のサイズがいくつもあるので、
viewportを指定して自動で端末の画面サイズに合わせた表示になるようにする。
viewportはPCでいうところのウインドウサイズとは違い、コンテンツを表示する領域。詳しくは
appleの解説をどうぞ。それをmetaタグに記述することでスマホで表示するときのサイズを調節できる。
こちらにサイズの算出について書かれているので参考にするといいよ！
スマホサイトの作り方でよく紹介されるのは↓の指定。
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
それぞれ以下の意味になる。
| プロパティ名 | 説明 |
|---|---|
| width | 端末の幅 |
| initial-scale | 初期表示の拡大率 |
| minimum-scale | ピンチイン（縮小時の操作）の最小値 |
| maximum-scale | ピンチアウト（拡大時の操作）の最大値 |
| user-scalable | ユーザーによる拡大/縮小操作の可否 |
1.0だと100%ということなので、minimum-scale・maximum-scaleが共に1.0(サイトによっては1としてる場合もあり)だと、現在の表示状態からの拡大・縮小はしないということになる。
だけど上記の指定だとコーディングの仕方によっては、iPhoneやgalaxy nexusで640pxの画像を使ったサイトを見たときに画面が拡大される。拡大されているので画像が半分だけ表示され、残りは画面をはみ出した状態になってしまう。理由は、
・divやimg要素のwidthをpxで指定している ・ウインドウの横幅をはみ出すサイズの画像を表示している
から。
試しにjavascriptでウインドウの横幅を取得すると↓のようになる。
■iPhone4 ※retinaディスプレイだと解像度は倍になる(iPhone3と比べて画面サイズは3.5インチで変わらないが解像度だけ高くなっている) 縦持ち：320px 横持ち：480px ■galaxy nexus 縦持ち：360px 横持ち：598px
width=device-widthとすると、それぞれ上記のpxが指定され、なおかつ初期表示の拡大率が1.0なので、640pxの画像はウインドウの横幅をはみ出してしまう。
これを回避する方法は2つある。
1・viewportの指定を変える
<meta name="viewport" content="width=device-width,initial-scale=0.5,minimum-scale=0.5" />
スマートフォン(iphone、Xperia、GALAXY等)のviewportの最適な指定方法とは？
で書かれているけど、あらかじめ初期表示の拡大率を半分にして、縮小時の最小値も半分にする。
これで最初からピンチインで縮小したのと同じ状態で表示される。
また、ユーザーが拡大して見れるようにmaximum-scaleは指定してない。
2・要素の幅を相対値で指定する
divやimg要素のwidthを%で指定する。これで要素の幅はウインドウの横幅に合わせて調整されるのでwidth=device-widthの値に沿った幅で要素が表示される。
この方法の場合、最初にあげた↓の指定でも、
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
画像はウインドウの横幅に収まるようになる。
viewportはもともとiPhoneで対応が始まったもので、androidはそれに遅れる形でviewportのサポートを始めた。viewportには仕様というものがなく、他のブラウザはiOS Safariの挙動を参考にしてviewportのサポートをしているそうだ。ブラウザの独自実装ほどあとで問題が（ブラウザごとの差異）起きるものはないので、通常は要素の幅を相対値で指定するやり方がいいと思う。
スマホサイトについては情報が多くても実際に制作してみないとわからないことがあるので、
今後も情報収集を続けることが大事！
