スマホ対応するために2種類のviewportの設定方法を紹介

<br />

今更ながらスマホサイト対応しようと思ったマスタカです
今回はviewportの設定方法

・PCのサイトをスマホで全画面で表示する
PCの文字が小さくても全体をスマホにも表示させたいときはこの設定

何もしないと左上が拡大される
サイトの幅に合わせてwidthを設定
user-scalableをつけることでピンチイン・アウトができるようになる

<meta name="viewport" content="width=1000,maximum-scale=1.0, user-scalable=yes">

・レスポンシブルデザインにするなら
以下の設定をするとPCとスマホで幅が変わるので
レスポンシブデザインにするならこの設定

width=device-widthでデバイスの幅になる
initial-scale, maximum-scaleでスケールを設定
user-scale=noでスケール禁止

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