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

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

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

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

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

PCサイトをスマホで表示
f:id:freelancer13:20170312133926j:plain

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

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

viewport指定後のPCサイトをスマホで表示
f:id:freelancer13:20170312133925j:plain

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

スマホを横向きにして表示
f:id:freelancer13:20170312133924j:plain


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

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

viewportを変更して表示
f:id:freelancer13:20170312133923j:plain

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

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