viewportを指定してスマホでも見やすくする

勉強も兼ねて構築中のサイトをスマホでみると非常にみにくい
何故ならPC用のサイトしか用意していないから

PC用のサイトが9割ほど完成したのでスマホ用のデザインもぼちぼち考えていきます

PC用のサイトをスマホでみるとみにくい原因はというと、
スマホがPC用のサイトを表示する時は横幅が980pxで表示しようとするかららしいです

自分のスマホの横幅をscreen.widthで取得すると360pxでした
そこに横幅980pxのレイアウトを合わせようとするので縮小されて表示されます

PCサイトをスマホで表示

対策は横幅980pxで表示しようとするのを360pxにすればよいです
そのためにはviewpointを指定します

<meta name="viewport" content="width=device-width;" />

viewport指定後のPCサイトをスマホで表示

device-widthでスマホの横幅に合うようになり縮小されずに表示されました
しかし横向きにすると横幅が広がるため拡大してします

スマホを横向きにして表示

viewportの記述を下記にすることで横向きにしても拡大されません

<meta name="viewport" content="width=device-width,
initial-scale=1.0,minimum-scale=1.0,
maximum-scale=1.0,user-scalable=no">

viewportを変更して表示

拡大されずに表示されました
ただし、この指定をするとピンチによる拡大縮小ができません

個人的には拡大縮小できなくてもいいと思ってるのでこの設定をベースにスマホ用のcssを作成してPCとスマホのデザインを切り分けていきたいと思ってます