viewport
公開日:2020-10-18 更新日:2020-10-18
スマホは機種によって、解像度や、1ピクセルあたりの物理サイズが異なるため、
サイトを CSS で指定されているサイズのまま表示した場合、文字が小さすぎたり、大きすぎたりする可能性があります。
そこでスマホでは、CSSで指定されているサイズを論理解像度のサイズとして扱い、物理解像度に合わせて拡大縮小して表示します。
以下のメタタグを指定すると、画面の幅を疑似的に360pxとして扱います。
(未指定の場合、スマホがどんな解像度でも、980pxとして扱われる)
(Webシステムなどで、サイト全体を画面に収まるように表示させたい場合は、大きな値を指定すると良いかもしれません)
そこで、以下のように指定すると、スマホのサイズにあった論理解像度にしてくれます。
また、device-width は、「device-width = 物理解像度」と言う訳ではなく、機種によりますが、物理解像度の 1/2 や 1/3 となる時もあります。
スマホの向きによっても論理解像度が変わるため、向きを変えても同じ大きさで表示されます(サイトが論理解像度に収まるようになっている場合)。
上記により、文字は読みやすくなりますが、クライアント領域が機種によって変わるため、クライアント領域を意識しない作りにする必要があります。
そこでスマホでは、CSSで指定されているサイズを論理解像度のサイズとして扱い、物理解像度に合わせて拡大縮小して表示します。
以下のメタタグを指定すると、画面の幅を疑似的に360pxとして扱います。
(未指定の場合、スマホがどんな解像度でも、980pxとして扱われる)
<meta name="viewport" content="width=360">
但し、固定で指定してしまうと、機種によって、見づらくなる可能性があります。(Webシステムなどで、サイト全体を画面に収まるように表示させたい場合は、大きな値を指定すると良いかもしれません)
そこで、以下のように指定すると、スマホのサイズにあった論理解像度にしてくれます。
<meta name="viewport" content="width=device-width,initial-scale=1">
これにより、PCで読めた文字が、スマホでは解像度が細かすぎて、文字が読めないと言うことがなくなります。また、device-width は、「device-width = 物理解像度」と言う訳ではなく、機種によりますが、物理解像度の 1/2 や 1/3 となる時もあります。
スマホの向きによっても論理解像度が変わるため、向きを変えても同じ大きさで表示されます(サイトが論理解像度に収まるようになっている場合)。
上記により、文字は読みやすくなりますが、クライアント領域が機種によって変わるため、クライアント領域を意識しない作りにする必要があります。