resizeするとスマホで何度もリロードされてしまいます…。

現在、ブラウザサイズで表示させる内容を変える設定をjavascriptで試しているのですがうまくいかず、お詳しい方アドバイス頂けないでしょうか…。

具体的には、以下の感じで設定を行って、
480px以下でmobile.htmlを表示、以上でpc.htmlを表示させています。

$(window).resize(function(){
var w = $(window).width();
var x = 480;
if (w <= x) {
location.href = "http://***.com/mobile.html";
} else {
location.href = "http://***.com/pc.html";
}
}
});

PCでは問題なさそうなのですが、スマホ（アンドロイドNEXUS5）の環境からみると、ページをスクロールするたびにページが更新され、再読み込みが行われ、ページの下に行くことが出来ません。
スクロールすると再読み込みされるので、ページ最上部に常に飛ばされてしまいます。

スクロールバーが出ることで、画面幅が異なったと認識されるのでしょうか？

何とか解決したいのですが、私の知識では解決法が分からず、ご相談をさせて頂きました。

お詳しい方いらっしゃいましたら、何卒アドバイスを頂けたらと思いますのでよろしくお願いします。

質問者からの補足コメント

• 自己解決しました。
  スクロールでもイベントが発生する原因は、サイドバーの出現では無く、スクロールの際にブラウザのヘッダー部分が隠れたり、サイズが変わったりすることで、高さ部分が変化したと認識してしまうようです。
  なので、幅を取得し、幅に対しての指定を行うことでイベントは発生しなくなりました。

    補足日時：2017/01/27 10:05

No.1 回答者： fujillin 回答日時： 2017/01/26 12:39

こんにちは

スマホは良く知らないので、対処療法的な案ではありますが・・・

サイトの構成等がよくわかりませんが、遷移する前に表示中のURLを調べて、ディレクトリ等が違っている場合だけページを変えるようにすれば、ひとまず機能するのではないでしょうか。

この回答へのお礼

アドバイス頂きありがとうございます。
今回はご提案頂いた方法は、サイトの構成上採用できないのです…。

お礼日時：2017/01/27 10:06