レスポンシブのとき、viewportタグをjsで振り分け

レスポンシブ対応だけど、
タブレットはPCと同じ見た目でいいのになー、ということありませんか？
そんな時のための備忘録です。

viewportをjsで切り分け

デバイスごとにviewportを書き換える方法です。

ちなみに

> 0と言う記述はtrueと同義。
この場合、
iPhoneの時か
iPodの時か
Androidの時
もしくはMobileの時
という指定になります。

ポイントはviewport！

レスポンシブ対応のときは、
呪文のように以下のviewportを指定します。

横幅＝デバイス幅にする設定です。

PCのみ対応していた時代のviewportは

こんな表記でした。
この設定だと、デバイスの幅を問わず表示幅を1200pxとみなすため、
タブレットで見てもPC表示のまま縮小されます。

それを逆手に取って今回は、
デバイス毎にviewportを書き換えた、という訳です。

まとめ

PCとタブレット表示が一緒だと楽ちんです。
臨機応変に、活用してみてください。