「resize」がiPad（Chrome）で効かない場合があります（初心者質問）

Question

レスポンシブWEBデザインを作って一旦完成させたのですが、iPadのChrome画面の向きを変えたさせた際に、前の画面幅の設定がそのまま引き継がれてしまう現象が結構な頻度で出る事に気づきました。

色々問題点を探しているうちに、コードをほぼリセットして使っても同じ不具合（？）が残っていたため、自力での解決は難しいと思い、初めて書き込みさせていただきます。

コードは、どこに問題があるのか絞っていった所、以下のようにほぼ原点に近い状態でも発生しました。
※開発時にこのコードを使ったわけではなく、わかりやすいタグに置き換えました。cssなども一切なしで試しています。

$(window).on("load resize", function() {

var winW = window.innerWidth;
var winBP = 1100;	//ブレイクポイント

	//小さな端末用
	if(winW < winBP) {
		$('body').css('background', 'skyblue');

	//大きな端末用
	} else {
		$('body').css('background', 'pink');
	}

});

●確認した点
・iPadのChromeを横で開き、次に縦に向け、再び横にした際に50%程度の確率で縦向きの設定が残ったままになってしまう。さらに続けていると、再び正常になる場合もあるがリロードすると再び不具合も戻ってしまう。動作はバラバラ。
・なぜか、横向きの設定が縦向きに残って出た事は１度もなし。
・iPadのSafariではこの現象は発生しない。
・MacのChromeのデベロッパーツールでも問題は発生しない。
・iPhoneのChromeでも同じ現象が出る。Safariは正常。（ブレイクポイントは変更して確認しました）

htmlやcssのことはある程度は理解できますが、jQueryは始めたばかりです。ぜひアドバイスを下さい。

Answer 1

heroyctさん、有難うございます！

jQuery初心者なので、
window.addEventListener("orientationchange"
から検索をやりなおしてみた所、以下の情報に辿り着き解決したようです！！！
http://www.cattlemute.com/2017/12/08/39/

私の場合、最初に質問したタグを以下に変更することで解決しました。

$(window).on("load resize", function() {
setTimeout(function(){
〜〜〜
}, 100);
});

年末年始とずっと悩み続けていたのですが、heroyctさんが教えてくださったタグ経由で結果的に解決することができました。
有難うございました！！！

Answer 2

向き変更された場合のeventも監視した方が良いかも

window.addEventListener("orientationchange", ()=>{
   // your code
});