- ウィンドウ幅で読み込むJavascriptを切り替える
- 2018.06.06
- レスポンシブデザインの際に、PC用とスマホ用で別のJSを使用する必要があったので、 その方法を記載しておきます。 <script type=”text/javascript”> jQuery(document).ready(function($) { if (window.matchMedia( ‘(min-width: 768px)’ ).matches) { $.ajax({ url: ‘●●●●●_pc.js’, dataType: ‘script’, cache: false }); } else { $.ajax({ url: ‘●●●●●_sp.js’, dataType: ‘script’, cache: false }); } }); </script> ブレイクポイントはCSSに合わせて適宜変更する必要があります。 また、Google Chromeではローカル環境では正しく動作しないため、サーバー上で確認する必要があります。
【この記事のタグ】
ajax
ajax