【レスポンシブ】デバイスの横幅を基準に読み込むJavascriptを切り替える方法

今回はデバイスの横幅を基準に読み込むJavascriptを切り替える方法をご紹介します。
スマホとPCでJavascriptを切り替えたい場合などに有効な方法です。

とある案件で必要になったので、カスタマイズ方法を調べました。
今回のコンテンツでシェアします。

簡単なので興味のある方は、続きをご覧ください。

画面サイズで読み込むJavascriptを切り替える方法

今回の方法では、デバイスの横幅に合わせて指定した外部jsファイルを読み込みます。
予め、読み込むjsファイルを作成してサーバーにアップロードしてください。

以下のJavascriptをサイト内に設置しましょう。

以下の部分を修正してやる必要があります。

上記の【769px】部分が、読む込むjsを切り替える基準となるデバイスの横幅になります。
上記の場合、デバイスの横幅が【769px以上】か【769px以下】で読み込むjsを切替えます。

この【769】という数値は制作するサイトに合わせて変更してください。
例えば、【500px】を基準に読み込むjsを切替えたいのであれば【500px】に変更しましょう。

上記の部分を【横幅769px以上のときに読み込みたいjsファイル】へのパスに置き換えましょう。
このパスは、jsファイルを設置した場所によって異なります。

例：https://ドメイン/js/js_a.js

こちらの部分も【横幅769px以下のときに読み込みたいjsファイル】へのパスに置き換えましょう。
このパスは、jsファイルを設置した場所によって異なります。

例：https://ドメイン/js/js_b.js

以上のカスタマイズで、指定したデバイスの横幅を基準に、読み込むjsファイルを切り替えることができます。

まとめ

デバイスの横幅を基準に読み込むJavascriptを切り替える方法をご紹介しました。

• 掲載しているコードをコピペする。
• 切替えの基準となるデバイスの横幅を指定する。
• 指定した横幅以上の場合に読み込むjsファイルのパスを指定する。
• 指定した横幅以下の場合に読み込むjsファイルのパスを指定する。

jsの切替えは、簡単に行えます。
興味のある方は、試しに実装してみましょう。