• お役立ち

metaのviewportの値を動的に変更するJavaScript

  • このエントリーをはてなブックマークに追加
  • LINEで送る
  • このエントリーをはてなブックマークに追加

レスポンシブ・デザインのウェブページが一般的になって久しいですが、あまり開発期間や費用をかけられない場合など、「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だけで処理したい(というか、そもそもメディアクエリだけで対応できるデザインにしたい)ところですね。でも、そうも行かない、という時などに参考にしていただければ。

●運用・更新のお仕事、制作会社変えたいな ●見積り、どこにお願いしようかな… ●ECサイト作りたいなあ… ●ホームページリニューアルしたいなあ… ●SASSできる人いないかなあ… ●Bitcoin決済導入したいなあ… ●SNSの運用まかせたいなあ… ●オウンドメディア活用したいな… ●アニメの話したいな…

などお考えの方はぜひご相談ください。(FBページメッセージからでもOK!)
お仕事のご相談、ご依頼を頂くと、ブリ子オリジナルグッズをプレゼントします!

お問い合わせフォーム

関連記事

    記事はありませんでした