jQueryでデバイス画面幅に応じたアコーディオンの開閉

Question

前提

jQueryでデバイスの画面幅に応じて、アコーディオン（accordion_inner）の開閉を自動で行いたいと考えています。
ロード時は下記のコードで正しく動作しています。

    $(document).ready(function () {
        if ($(window).width() < 577) {
            $(".accordion_inner").slideUp();
        }
    });

次にリサイズ時およびデバイスの回転時にも対応するため、上記とは別に下記コードを追加しました。
IOSデバイスでは、スクロール時にもリサイズが発火してしまうため、
実際に画面幅が変わっていない場合は処理を実行しないように、
最初の画面幅を変数windowWidthに格納して判定するようにしています。

    var $windowWidth = $(window).width();

    $(window).on('resize orientationchange', function () {
        var $reziedWidth = $(window).width();
        if ($windowWidth !== $reziedWidth) {
            if ($(window).width() < 577) {
                $(".accordion_inner").slideUp();
            }else {     
                $(".accordion_inner").slideDown();
            }
        }
    });

発生している問題

上記2つのコードで、PCでの挙動は問題なく動作しましたが、
モバイル（iPhone）では、デバイスを回転させたとき、1度は正しく機能するのですが、
2回目以降はアコーディオンの開閉が行われません。

おそらく変数windowWidthが正しく更新されていないことが原因と推測し、
試行錯誤したのですが、修正することができませんでした。

問題点など、ご指摘ご教授いただければ幸いです。

Answer 1

下記サイトを参考に自己解決することができました。
https://hajimete.org/jquery-ios-scroll-no-resize

    // HTML読込時の画面幅に応じて、アコーディオンを開閉
    $(document).ready(function () {
        if ($(window).width() < 577) {
            $(".accordion_inner").slideUp();
        }
    });

    // リサイズ時の表示幅に応じて、アコーディオンを開閉
    var use = navigator.userAgent;
    var width1 = $(window).width();
    $(window).resize(function(){
        var width2 = $(window).width();
        if (use.indexOf('iPhone') > 0 || use.indexOf('iPad') > 0) {
            if(width1 != width2) {
            width1 = width2;
            resize();
            }
        } else {
            resize();
        }
    });

    function resize() {
        if ($(window).width() < 577) {
            $(".accordion_inner").slideUp(0);
        }else {     
            $(".accordion_inner").slideDown(0);
        }
    }