レスポンシブ・デザインのウェブページが一般的になって久しいですが、あまり開発期間や費用をかけられない場合など、「PCで閲覧した場合（＝PCビュー）」と「スマホで閲覧した場合（＝SPビュー）」の二種類の表示のみを設定するということも少なくありません。
例えばPCビュー時の基準の横幅を980px、SPビュー時の基準を320pxとして作成したページがあるとします。単純に考えればCSSのメディアクエリでブレークポイントを一つ設定すればいい話なんですが、
画面幅768pxのタブレット端末で見た場合もPCでの閲覧時と同じように（PCの画面が縮小したような状態で）見せたい。
画面幅320px以上のスマホ端末で見た場合に、画面幅320pxの端末で見ているのと同じ状態（画面を拡大して）見せたい。
というようなご要望を受けることもしばしば。特にレスポンシブということでなければ、普通にmeta[name="viewport"]要素を設定すれば良いだけの話ですが、今作っているページはレスポンシブデザイン。ということでこの場合、デバイスに応じてmetaのviewportの値を変更する必要が出てきます。
今回はそのためのJavaScriptの記述をご紹介します。
前提条件
- PCビューの基準幅は980px
- SPビューの基準幅は320px
- 幅980px未満～768pxのデバイス（タブレットを想定）ではPCビューを縮小して見せたい
- 幅768px未満のデバイス（スマホを想定）ではSPビューの基準値を拡大して見せたい
ソースコード
ソースコード解説
jQueryは使わない
jQueryを使った場合、jQueryのライブラリを含めたJavaScript関連のファイルはbody要素の後ろの方で読み込み、DOMのロード後に処理が走ることが多いので、ベースとなるデバイス以外のデバイスでアクセスしたユーザーの目には、ベースデバイス用の表示が一瞬表示された後にmetaのviewport値が書き換えられて最適な状態になる、というラグが生じてしまいます。
このラグを回避するため、本処理はjQueryに依存しない形で独立して記述し、head要素の中（ベースとなるmeta[name="viewport"]要素の後）で読み込み・実行します。
おわりに
できればJavaScriptは使わずにCSSだけで処理したい（というか、そもそもメディアクエリだけで対応できるデザインにしたい）ところですね。でも、そうも行かない、という時などに参考にしていただければ。
