勉強も兼ねて構築中のサイトをスマホでみると非常にみにくい
何故なら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とスマホのデザインを切り分けていきたいと思ってます
