先日レスポンシブのページを作った時に、スタイルをブラウザ幅が変わった時にはリセットしてほしいと思ったのでちょっとjavascriptでかいてみた。

デモを使って紹介する。
ベースは以下。灰色のボックスとボタン置いてボタン押したらボックスの色を変えるっていう簡単なデモを用意・

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css"> 
    <script src="/common/jquery-3.1.1.min.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <div class="wrap">
        <div class="box"></div>
        <div class="btn">change</div>
    </div>
</body>
</html>

style.css

.box {
    width: 150px;
    height: 150px;
    background-color: #ccc;
}
.btn {
    width: 100px;
    border: 1px solid #000;
    background-color: #fff;
}

最初に書いたのは、ブラウザ幅が変わった時にページをリロードする、って処理。

index.js

$(function(){
    
    $(".btn").click(function(){
    $(".box").css("background-color","red");
    })
    
    var timer = false;
    $(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    };
    timer = setTimeout(function() {
            location.reload();
    }, 200);
});
    
    
});

setTimeoutでリサイズする度にリロード処理させる。普通にやると何度もリサイズ処理が走っちゃうのでclearTimeoutで毎回のイベントを消して、最後の一回で処理する、という流れ。
しかし問題はあって、PCならいけどSPの場合、スクロールする度に縦のブラウザサイズが変わってめっちゃリロードしてしまう。
で、改良したのが以下。

index.js

$(function(){
    
    $(".btn").click(function(){
        $(".box").css("background-color","red");
    })

    var timer = false;
    var prewidth = $(window).width()
    $(window).resize(function() {
        if (timer !== false) {
            clearTimeout(timer);
        };
        timer = setTimeout(function() {
            var nowWidth = $(window).width()
            if(prewidth !== nowWidth){
                location.reload();
            };
            prewidth = nowWidth;
        }, 200);
    });
});

横幅を取得してリサイズの前後で変化なかったら処理しない、っていう風にした。
問題解決。

しかしリロードするのってユーザビリティ悪いよねってなって、最終的にはインライン要素のstyle属性を削除するっていうものに落ち着いた。

index.js

$(function(){
    
    $(".btn").click(function(){
        $(".box").css("background-color","red");
    })
    
//    リサイズ時インラインスタイル削除
    var timer = false;
    var prewidth = $(window).width()
    $(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        var nowWidth = $(window).width()
        if(prewidth !== nowWidth){
            $('.wrap *').removeAttr('style');
        }
        prewidth = nowWidth;
    }, 200);
});
    
    
});

っていう話。