ざっくりviewport

スマートフォンサイトを作る際に避けて通れないのがmetaタグのviewport。

適当に書いてたけど、ざっくり理解した。

viewportとは

viewportは、スマートフォンやタブレット端末で、デバイスのサイズより大きい画面を縮小したり、拡大したりできる、モバイル端末特有のあの動きの事を指す。(正確には表示領域なんだけど・・・。俺的ざっくり理解はこれがしっくりくる。)

なので、大前提としてviewportはPCには関係ない。
PCでは1200pxのサイトを1024pxしか解像度がない古いPCで見たらスクロール移動するしか全部を見る方法がない。

metaタグのviewport

モバイル端末では、あの動きができる。が、そもそも、どのサイズで最初に表示するのが適切なのか。

そのサイトでのオススメサイズを教えてあげるのがmetaタグのviewportである。

例

PCサイトしか用意してないくて、そのサイトが横幅1200pxでいい感じに見れるように作っているサイトであれば、metaタグは、以下の様な感じになる。

これで、スマートフォンでもタブレット端末でも、1200pxのディスプレイで見た時と同じように収まる。

もちろんスマートフォンでは、文字が小さすぎて見れないと思うけど・・・。

では、360pxでいい感じになるようにあらかじめスマホ向けのサイトをつくっておいて、

とすれば、スマートフォンの場合に適切に見れる。

が、360px以上のタブレット端末では、360pxを無理に間延びさせたサイトになる。

PCでみると、左側の320pxだけ使われて、残りは真っ白とかになる。

 

なので、最近は以下の様に書くことがほとんど。

これは、デバイスの自身の適正サイズを横幅とする。

スマートフォンの場合だと320pxや360px、タブレット端末だと768pxとかであろうか。

なので、デバイスによってサイズを変えてやるので適正な大きさで見れるので、device-widthを指定することが多い。

が、

そもそもレスポンシブ対応していないと、横幅が変動するということは固定サイズのサイトでは残念な事になる。

 

まとめ

レスポンシブ対応していて、どのサイズでもいい感じに見れるなら以下を。

1200pxのPCデザインしかない。スマートフォンの場合になんか全部映らずにデザイン崩れる。って方は以下を。