スマホでは指定のjsが挙動しないようにしたい。

Question

###前提・実現したいこと
レスポンシブでサイトを制作してます。
以下のfullPageというJqueryプラグインを使ってるのですが、スマホでは適応させたく無く、当該jsを読み込ませないようにしたい。
https://alvarotrigo.com/fullPage/

windowサイズまたはデバイスに応じて分岐するのかはどちらでも問いません。
試行錯誤しているのですがなんとも処理がうまく行きません。

###該当のソースコード

    <script>
    $(document).ready(function() {
        $('#container').fullpage({
以下略
        });
    });
    </script>

###試したこと
①：ウィンドウサイズに応じpcの場合は当該js読み込み それ以下は空とする
→変化なし

jQuery(document).ready(function($) {
    if (window.matchMedia( '(min-width: 769px)' ).matches) {
    //画面幅769px以上の場合
        $.ajax({
            url: 'js/jquery.fullPage.min.js',
            dataType: 'script',
            cache: false
        });
    } else {
    //画面幅768px以下の場合
        $.ajax({
            url: '',
            dataType: 'script',
            cache: false
        });
    };
});

ちなみに例えば、試しに以下テストですがアラートは表示されるので上記／下記の共通部分の書き方自体は間違ってないのかな、と思います。

<script>
jQuery(document).ready(function($) {
	//PC環境の場合
	if(window.matchMedia( '(min-width: 769px)' ).matches) { //切り替える画面サイズ
            window.alert("パソコンの時の処理");
	}
    else{//スマホ環境の場合
        window.alert("スマホの時の処理");
    }
});
</script>

②：fullpage.jsに付与されるclassをremove classで削除

→こちらはクラス自体は付与されなくなるものの、構造的に機能せず適切では無かったです。

③：試しにJqueryのCDNバージョンを変えてみたり、サーバーにアップしてテストしたり。。

当方jsにうとく、ネット上にあるものを片っ端から試しましたが
無理なのでしょうか？？
どなたかアドバイス頂けると出来るとありがたいです。
よろしくお願い致します。

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[rurikabut0_8888]

不慣れですいません！アドバイスありがとうございました。

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

Answer 1

js/jquery.fullPage.min.js はHTMLにscript要素で呼び出し。

jQuery( function( $ ) {
	//PC環境の場合
	if ( window.matchMedia( '(min-width: 769px)' ).matches ) { //切り替える画面サイズ
		$( '#container' ).fullpage( { /*略*/ } );
	} else {
		//スマホ環境の場合
	}
} );

Answer 2

fullpage.jsの読み込みだけでなく、設定しているコードも、PC限定の動作にするのが望ましいですね。
jQueryにはgetScriptという、javascriptを読み込んで実行するメソッドがありますので、それを利用できます。

// PCなら
if (window.matchMedia( '(min-width: 769px)' ).matches) {
	$.getScript('js/jquery.fullPage.min.js').then(function(){
		// fullPageを読み込みんで実行完了したら実行される
		$('#container').fullpage({
			以下略
		});
	});
}

Answer 3

ajaxで外部スクリプトを読み込むことも可能ですが、document.writeを使った方が手っ取り早いかと。

if (window.matchMedia( '(min-width: 769px)' ).matches) {
  //画面幅769px以上の場合
  document.write('<script src="js/jquery.fullPage.min.js"></script>');
}

ただし、PCブラウザでページを開いた際のウインドウ幅が狭いとPCブラウザなのにfullpageが適用されない、ウインドウ幅を変えてもfullpageが効いたままになるなどといったケースが予想されます。

幸い、fullPageにはdestroyメソッド（DEMO）が用意されているので、fullPage自体はレイアウトに関係なく読み込んでおき、レイアウトが切り替わったタイミングで動作を切り替える方がいいと思います。

Comments

[rurikabut0_8888]

ありがとうございます。
他の方がコメント下さった方法はすべて試行済みでしたが、なぜだか反映されませんでした。
理由は分かりませんが、貴方が教えてくださったfulpadeのdestroyメソッドでのみ、希望の動作になりました。大変助かりました。

Answer 4

色々試しましたが、以下で解決しました。これ以外はNGでした。
ただ、もしや私の凡ミスな可能性もありますので参考にされず、同様のケースでお困りの方は皆様が有益な回答して下さったのでそれらも合わせてご確認下さいませ。

$(function(){
if (window.matchMedia( '(max-width: 767px)' ).matches) {
  $.fn.fullpage.destroy('');

}
        });