jQuery デバイスサイズで適用させる処理の切り替え

Question

前提・実現したいこと

デバイスにで適用させる処理を変えたいと思い、調べたところ
https://www.aiship.jp/knowhow/archives/27978
こちらのサイトに載っていた以下のコードを使って処理を切り替わるようにしたのですが、
再読み込みしないと適用されず崩れてしまいます。（再読み込みすれば問題なく動きます）

再読み込みしなくても適用されるようにするにはどうすれば良いのでしょうか？

諸事情により自分で書いたコードが載せられないので、サイトのコードをそのまま載せさせていただいています。

<script type="text/javascript">
jQuery(document).ready(function($) {
    //600px以上の場合
    if (window.matchMedia( '(min-width: 600px)' ).matches) {
$(function(){
    $("#sample").mouseover(function(){
        $(this).toggleClass('pc');
    });
});
    //600px以下の場合
    } else {
$(function(){
    $("#sample").mouseover(function(){
        $(this).toggleClass('smartphone');
    });
});
    };
});
</script>

Comments

[m.ts10806]

結局現象発生するのがご自身の環境でしたら、コードやブラウザ含めて全て提示するしかないのでは。

Answer 1

mouseoverイベントの処理の中で条件分岐をするというのはダメでしょうか。

jQuery(document).ready(function($) {
	$("#sample").mouseover(function(){
		if (window.matchMedia( '(min-width: 600px)' ).matches) {
			$(this).toggleClass('pc');
		} else {
			$(this).toggleClass('smartphone');
		}
	});
});

Comments

[..o]

上手くいきました。ありがとうございます。

Answer 2

windowリサイズしたとき再読み込みしないで対応ということですか？
リサイズイベントをつかってチェックしてはどうでしょうか？