確認環境
iPhone4sのSafariだけで確認しました。以下は全てこの環境での結果です。
Androidの場合でも同じ?
1.Viewport指定なし (ドキュメントのwidthが980px以下)
未指定時のiPhoneのviewport横サイズは980px。
縦: 横スクロールなしで表示される。
横: 横スクロールなしで表示される。(縦時にくらべていくらか拡大される)
2.Viewport指定なし (ドキュメントのwidthが980pxよりより大きい)
縦: 980pxまでは横スクロールなしで表示できるように拡大される。
横: 縦向きと同じ挙動
縦→横または横→縦に傾けると幅320px表示となるように拡大される。
3.width=device-width
縦: 719pxまでは横スクロールなしで表示できるように拡大される。
横: 縦時にくらべていくらか拡大されている。
縦→横→縦とすると、最終的な幅は640pxになる。
挙動がつかめない。
4.width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5
縦: 640pxまでは横スクロールなしで表示できるように拡大される。
横: 960pxまでは横スクロールなしで表示できるように拡大される。(縦幅の1.5倍)
なお、拡大率のMIN,MAX共に初期倍率と同じため、拡大率は固定されている。
5.width=400
縦: 400pxまでは横スクロールなしで表示できるように拡大される。
横: 400pxまでは横スクロールなしで表示できるように拡大される。
width=600(縦向き時widthより大きい幅)、width=1200(なんとなく大きい幅)でも同様の挙動となった。
コンテンツの幅とviewportのwidthを一致させること。異なる場合には上記とは違う動きをした。
まとめ
-
PCサイトにも width=<コンテンツ幅> なviewportを指定しましょう。
-
スマホサイト向けのviewportについて。widthはdevice-widthを指定して、明示的に初期スケール、MAXスケール、MINスケールを指定しましょう。
-
デバイス種類(PC,スマホ,タブレット)毎にViewを作成するのが無難そう?
参考にしたサイト
-
http://www.codegrid.net/ の「実践!スマホサイトのviewport設定」