Window.width() для размера браузера?

Question

У меня есть следующие функции JQuery:

<script> 
    $(document).ready(function(){ 
     var current_width = $(window).width(); 
     if(current_width => 1920){ 
      $("#body").css({  
       -moz-transform: 'scale(1, 1)', 
       zoom: '1', 
       zoom: '100%' 
      }); 
     } 
     else if(1366 < current_width < 1920){ 
      $("#body").css({  
       -moz-transform: 'scale(0.85, 0.85)', 
       zoom: '0.85', 
       zoom: '85%', 
      }); 
     } 
     else if(current_width <= 1366){ 
      $("#body").css({  
       -moz-transform: 'scale(0.7, 0.7)', 
       zoom: '0.7', 
       zoom: '70%' 
      }); 
     } 

    }); 
</script> 

Я использую расширение размеров окна Chrome для тестирования различных размеров экрана, но при использовании функции window.width JQuery, несмотря на изменение размера браузера, он по-прежнему обнаруживать мой родной 1920px ширина. Что-то не так с моим кодом, или мне действительно нужно проверять разные размеры экрана с помощью других устройств при использовании функции window.width()?

Спасибо

Answer 1

Оберните свой код в resize обработчика событий. См. Изменения, выделенные в приведенном ниже коде.

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

    var current_width = $(window).width(); 
    if (current_width >= 1920) { 
     //   ^^ 

     $("#body").css({ 
      '-moz-transform': 'scale(1, 1)', 
      // zoom: '1', Don't need 
      zoom: '100%' 
     }); 
    } else if (current_width > 1366 && current_width < 1920) { 
     //  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 

     $("#body").css({ 
      '-moz-transform': 'scale(0.85, 0.85)', 
      // zoom: '0.85', // Not needed 
      zoom: '85%', 
     }); 
    } else if (current_width <= 1366) { 
     $("#body").css({ 
      '-moz-transform': 'scale(0.7, 0.7)', 
      // zoom: '0.7', // Not needed 
      zoom: '70%' 
     }); 
    } 
});