レスポンシブサイトに使える！画面サイズで読み込むJavascriptを切り替えるjs
レスポンシブウェブデザインでサイト作成をする際に、場合によっては使うことになるかも知れないJavascriptで画面サイズ指定に応じたjavascriptを読み込む条件分岐です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script type="text/javascript"> jQuery(document).ready(function($) { //PC環境の場合 if (window.matchMedia( '(min-width: 769px)' ).matches) { //切り替える画面サイズ $.ajax({ url: 'js/pc.js', dataType: 'script', cache: false }); //モバイル環境の場合 } else { $.ajax({ url: 'js/sp.js', dataType: 'script', cache: false }); }; }); </script> |
自分がこのスクリプトを使用した経緯は、レスポンシブウェブデザインでBGMを流したい要望があった時でした。
レスポンシブなのでFlashは使えず、HTML5で実装されたaudioタグを使った。PCは自動再生でミュートボタンを、スマホはONとOFFのボタンすることになった。そして、プログレスバー（再生時間の横棒）じゃなくて画像ボタンで操作が出来るようにする。
そんな時に、タブレット・スマホ表示サイズでのCSS切り替えと連動させた、js切り替えが必要になった。1つのファイルにjsを書いてしまうといろいろ面倒でややこしくなるので、個々にファイルを読み込む方法にしました。
この記事を書いた人
マヒ フリーランスWebデザイナー。Web制作に関する記録用に更新します。アフィリエイトに関する情報発信もしていきます。趣味はスノーボード。将来の夢は山奥に動物王国を作ること。