※ただまだいっこしか読み込ませ変えられませんから。
熟読しな!
ついに出来た、というか判明
上記window.matchMediaは
リロードすると変わることが判明
つまり 読み込み直せば その処理がみれる。
リアルにウインドウサイズの拡大縮小で変更したい場合は
addListenerで対応するらしいがながくなるので未処理
最後にメモします
まずは
window.matchMedia
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: 768px)' ).matches) { $.ajax({ url: '<?php echo get_stylesheet_directory_uri(); ?>/d/js/side-fixed-comment.js' , dataType: 'script' , cache: false }); //モバイル環境の場合 } else { $.ajax({ url: '' , dataType: 'script' , cache: false }); }; }); </script> |
そもそもそんあ処理が必要なのは
ひっついてくるサイドバーの処理が
モバイルで効くと
モバイルはサイドバーは@メディアでcssを変更して
デザインを変えているので
処理がダブって不都合なため
ウインドウサイズが狭まった場合 つまりスマホでは ひっつくサイドバーを実行させたくない。
そのため
上記処理
裏話では
実際読み込ますJSを変更するこーどなため
直接jsの最後に
実際の処理を書き込んだ
1 2 3 4 5 6 7 8 | /*ウインドウサイズでスプリクトを読み込ますか分岐しているので(window.matchMediaで)そのためこのJSの最後に無理やり処理を追加 下記は レスポンシブで ひっつきサイドバーを維持するための処理*/ $(window).on( 'load resize' , function (){ var w = ($(window).width() -56) * 0.24 ; $( '#d_sidenavi_in' ).width(w); }); |
こんな感じ
そんで ウインドウリロードで実行が変わるので
デザインの確認もし安い
リアルタイムに変更したい場合は
http://memocarilog.info/jquery/6500#sample
このページを理解して組み込めばできなくはなさそうだが。。
古いブラウザ位のばあい
1 2 | <script src= "matchMedia.js" ></script> <script src= "matchMedia.addListener.js" ></script> |
こいつが必要らしい。
1 2 3 4 5 6 7 8 9 10 | <h1>jQuery - matchMedia.matches</h1> <p id= "test1" >matchMedia で表示を変える。</p> <hr> <h1>JavaScript - matchMedia.matches</h1> <p id= "test2" >matchMedia で表示を変える。</p> <hr> <h1>JavaScript - matchMedia.addListener</h1> <p id= "test3" >matchMedia で表示を変える。</p> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <script src= "matchMedia.js" ></script> <script src= "matchMedia.addListener.js" ></script> <script> // jQuery - matchMedia.matches ======================== $( function (){ if (window.matchMedia( '(max-width:2000px)' ).matches) $( '#test1' ).text( '2000px以下です。' ) ; $(window).on( 'resize' , function () { if (window.matchMedia( '(max-width:800px)' ).matches) { $( '#test1' ).text( 'モバイルサイズ時(800px以下)です。' ) ; } else { $( '#test1' ).text( 'PCサイズ時(800px以上)です。' ) ; } }); }); // JavaScript - matchMedia.matches ======================== window.addEventListener( 'load' , function (){ if (window.matchMedia( "(max-width:2000px)" ).matches){ document.getElementById( "test2" ).innerHTML = "2000px以下です。" ; } }, false); window.addEventListener( 'resize' , function (){ if (window.matchMedia( "(max-width:800px)" ).matches) { document.getElementById( "test2" ).innerHTML = "モバイルサイズ時(800px以下)です。" ; } else { document.getElementById( "test2" ).innerHTML = "PCサイズ時(800px以上)です。" ; } }, false); // JavaScript - matchMedia.addListener ======================== window.matchMedia( "(max-width:800px)" ).addListener( myFunc ); function myFunc(){ document.getElementById( "test3" ).innerHTML = "モバイルサイズ時(800px以下)です。" ; if (window.matchMedia( "(min-width:800px)" ).matches) { document.getElementById( "test3" ).innerHTML = "PCサイズ時(800px以上)です。" ; } } </script> |