javascript - ボックスを計算するための window.resize

Question

私はこのjsコードを持っています:

$(window).resize(function() {
    var formHeight = $(".box-demo").outerHeight() + 40;
    $(".box-demo").css("top",-formHeight+"px");
});

ウィンドウのサイズを変更したとき。box-demo はフォームの高さを再計算しています。しかし今、私はモバイルデバイスでこれに問題があります。

幅変更時のみ。次に、この機能を実行する必要があります。ドキュメントの高さと幅が変更されたときに発生しました。どうすればこれを作ることができますか。これは、ドキュメントの幅を変更したときにのみ実行されます。

助けてくれてありがとう！

Answer 1

これを行うにはもっと良い方法があるかもしれませんが、事前に設定されたウィンドウ幅の値に基づいて行うことができます。サイズ変更が発生する必要があるのは、幅が変更された場合のみです。

var windowWidth;

$(document).ready(function() {
    windowWidth = $(window).width();
})

$(window).resize(function() { 
    if($(this).width() != windowWidth)
    {
        var formHeight = $(".box-demo").outerHeight() + 40;
        $(".box-demo").css("top",-formHeight+"px");
        windowWidth = $(this).width();
    }
});

編集:次を使用して、「px」を追加する必要を回避することもできます。

$(".box-demo").css({top: -formHeight});

編集 2:幅のみが変更されたときに変更したい場合は、高さのチェックも追加できます。

var windowHeight;
...
if($(this).width() != windowWidth && $(this).height) == windowHeight)

Answer 2

メソッドを抽出し、準備が整ったドキュメントにもバインドします。