viewport

スマホは機種によって、解像度や、1ピクセルあたりの物理サイズが異なるため、 サイトを CSS で指定されているサイズのまま表示した場合、文字が小さすぎたり、大きすぎたりする可能性があります。
そこでスマホでは、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 となる時もあります。
スマホの向きによっても論理解像度が変わるため、向きを変えても同じ大きさで表示されます（サイトが論理解像度に収まるようになっている場合）。

上記により、文字は読みやすくなりますが、クライアント領域が機種によって変わるため、クライアント領域を意識しない作りにする必要があります。