window.matchMediaでウインドウサイズでJSを読み込み変える

※ただまだいっこしか読み込ませ変えられませんから。
熟読しな！

ついに出来た、というか判明
上記window.matchMediaは
リロードすると変わることが判明

つまり　読み込み直せば　その処理がみれる。

リアルにウインドウサイズの拡大縮小で変更したい場合は
addListenerで対応するらしいがながくなるので未処理

最後にメモします
まずは
window.matchMedia

<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の最後に
実際の処理を書き込んだ

/*ウインドウサイズでスプリクトを読み込ますか分岐しているので（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
このページを理解して組み込めばできなくはなさそうだが。。

古いブラウザ位のばあい

<script src="matchMedia.js"></script>
<script src="matchMedia.addListener.js"></script>

こいつが必要らしい。

<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>
<script src="matchMedia.js"></script>
<script src="matchMedia.addListener.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.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>