Если ширина окна> 1080, то это - еще, вернуться к CSS и проверить изменение размера и загрузку страницы

Question

Я делаю раздел на странице, высота устанавливается с помощью screen.availHeight который делает именно так, как мне нужно, но мне также нужно, чтобы при ширине ниже 1080px высота в CSS возвращалась к значению по умолчанию, я попробовал несколько вещей, но это не будет работать, if Заявление я использую чеки и буду использовать только screen.availHeight если ширина превышает 1080px, как и должно быть, но когда она снова уменьшается, она не будет сброшена.

Кроме того, мне нужно, чтобы проверить, когда страница загружается, как я использую (window).resize - есть ли способ использовать оба (window).resize а также (document).ready чтобы он проверял ширину при загрузке, а также при изменении размера?

<script>
$(window).on('load resize',function(){ //Amended line which now works
    if ($(window).width() > 1080)
    {
        var screenHeight = screen.availHeight;
        $('#home').css('height', screenHeight + 'px');
    }
    else
    {
        $('home').css('height', '');
    }
});
</script>

Вот демоверсия страницы - http://zimxtrial.ukbigbuy.com/

Если вы попытаетесь загрузить страницу с браузером с шириной 1080px, это нормально, затем измените размер выше 1080px, все еще в порядке, затем уменьшите размер, вы увидите проблему один, затем обновите страницу с разрешением выше 1080px, и вы увидите проблему два. Это мой первый проект с использованием JavaScript, поэтому я могу упустить что-то простое.

Первая проблема теперь решена - кто-нибудь знает, как сделать else вернуться к CSS?

Answer 1

Вы можете использовать.on(), чтобы связать функцию с несколькими событиями:

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

    ...

});

Или просто передайте функцию в качестве параметра обычным функциям события:

var myFunction = function() {

   ...

}

$(window)
    .load(myFunction)
    .resize(myFunction)
    .click(myFunction)