PC用のwebページをそのままスマホ用で使い回す場合にmetaタグの「viewport」の指定はとても強い味方になります。しかし、使い方を誤ると元のページのレイアウトがガタガタになってしまうこともあります。このページは、自分の失敗や錯覚をふまえて、「viewport」に関して検証するためのものです。
「viewport」を設置していないwebページをスマホで見る（縦持ち）と、iPhoneを始め、多くのスマホは左右画面サイズを980pxとして処理します。これは、body要素に「width:980px」と指定したのと同じになります。また、webページの画面サイズが980px未満で、スマホからの見た目をPCで簡易に再現する場合、「body {width:980px}」をCSSに追加すればよいことになります。
次のサンプルは、webページの最大要素のサイズが980px以下の場合です。
いずれもbodyの占める範囲をピンク色のボーダーで表示します。
(a1)は、「viewport」の指定無し、bodyのサイズ指定無し、ページ内の最大要素は320pxになります。PCでもスマホでもbodyは画面横いっぱいに広がります。
(a2)は、(a1)のコピーを使い、bodyのみ変更、980pxに指定しています。スマホでは(a1)のときと同様にbodyは画面横いっぱいに広がりますが、PCでは画面中程に980pxの枠が表示されます。これがスマホのページビューの範囲になります。
次に、webページの最大要素のサイズが980pxを越える場合です。PCでは画面が広く、bodyのサイズを特に指定しなくても、CSSの通りに表示されますが、スマホでは、「viewport」を設置無しで、かつbodyのサイズ指定も無いとき、980pxを越えた要素のCSSは一部無視されます。
(a3)は、「viewport」の指定無し、bodyのサイズ指定無し、ページ内の最大要素は980pxを越えた1120pxになります。PCでは、body（ピンク色のボーダー）が画面横いっぱいに広がり、3つのボックスが正しく（全て「margin:10px auto」とセンタリングの指定）表示されます。スマホでは、3つのボックスの内、box01とbox02は横サイズが980px未満なので、正しくセンタリングされますが、box03は、980pxを越えるサイズなので、センタリングが無視されます。また、iPhoneでは、画面横いっぱいにbodyが広がりますが、左へスワイプすると、溢れた要素が右側に表示されます。Androidでは、画面サイズが、980pxを越えた最大の要素をすべて表示するため、そのサイズに合わせて画面が広がります。しかし、bodyの認識はあくまで980pxなため、bodyを表すピンク色のボーダーは画面内側に寄って表示されます。
(a4)は、(a3)のコピーを使い、bodyのサイズのみ変更、最大要素のサイズと同じ1120pxに指定しています。PCでは、画面中程に寄って1120pxの枠が表示されます。スマホでは、1120pxの枠が画面いっぱいに広がりますが、iPhoneでは、980pxの画面サイズは変わらず、越えた分は、両サイドともスワイプすることで確認できます。
