jQuery функция работает, только если я вручную изменяю размер окна на мобильный, но не при обновлении

Question

У меня есть фрагмент кода, в котором я пытаюсь добавлять и удалять классы только для мобильных устройств, и он работает только тогда, когда я вручную изменяю размер браузера до окна мобильного устройства, а когда я обновляю sh, он не работает ,

$(document).ready(function(){
 $(window).on('load, resize', function mobileViewUpdate() {
    var viewportWidth = $(window).width();
    if (viewportWidth <= 800) {
        $('.header').removeClass('header-transparent');
        $('#navdiv').removeClass('bottom_border');
        $('.navbar-main').addClass('nav-shadow');
        $('#nav-icon').addClass('navbar-toggler-icon2');
    }
  });
});

Answer 1

Хотя я согласен с другим ответом, показывающим, чтобы извлечь logi c для метода и использовать его в обоих местах (чтобы не использовать прокси-логи c через DOM), для вас все еще есть возможность trigger() событие также готово.

$(document).ready(function(){
  $(window).on('load, resize', function mobileViewUpdate() {
    var viewportWidth = $(window).width();
    if (viewportWidth <= 800) {
        $('.header').removeClass('header-transparent');
         $('#navdiv').removeClass('bottom_border');
        $('.navbar-main').addClass('nav-shadow');
     $('#nav-icon').addClass('navbar-toggler-icon2');
    }
  }).trigger('resize');
});

Answer 2

Попробуйте извлечь функцию mobileViewUpdate:

function mobileViewUpdate() {
    var viewportWidth = $(window).width();
    if (viewportWidth <= 800) {
        $('.header').removeClass('header-transparent');
         $('#navdiv').removeClass('bottom_border');
        $('.navbar-main').addClass('nav-shadow');
     $('#nav-icon').addClass('navbar-toggler-icon2');
    }
}

И затем вызовите ее из document.ready и resize, оба:

$(document).ready(function(){
 $(window).on('resize', mobileViewUpdate);
 mobileViewUpdate();
});

Это должно работать. Тем не менее, я думаю, что было бы лучше установить мета-тег viewport и использовать вместо этого медиа-запросы для адаптации веб-сайта для мобильных устройств.