ブラウザサイズ変更時の挙動

※ アフィリエイト広告を利用しています

サイト制作中にレスポンシブの確認でブラウザのサイズを変えることがありますが、
jsの関係か画像サイズがレスポンシブについてこれいないという現象に直面。
通常、あまりブラウザのサイズを変えたりすることはないと思われますが
ちょっと気持ち悪いので、何か解決策がないかと考えてみました。

いろいろとjs周りを変えると、いろんなところに影響がありそうなので
手っ取り早く対応できそうなのは、ブラウザのサイズを変えたら
リロードすれば、きちんとフィットするので、その方法で調べてみました。

こちらの「うぇぶくり」さんのサイトにて調整済みのJSがありました!
(ありがとうございます!)

var timer = 0; 
var currentWidth = window.innerWidth; 
$(window).resize(function(){ 
    if (currentWidth == window.innerWidth) {
         return;
     }
     if (timer > 0) {
         clearTimeout(timer);
     }
     timer = setTimeout(function () {
         location.reload();
     }, 200);
 });

上記コードが「うぇぶくり」に記載されており、読み込ませたところきちんと動きました。

たたしandroidのスマホでは縦横に変更した場合、うまく動かないものも、、、
概ね希望通りの挙動になったので、こちらを使わせてもらいました。

JSの詳細の説明については、記載元の「うぇぶくり」さんのサイトをご確認ください。

web制作
noteをフォローする
note

コメント

タイトルとURLをコピーしました