Получить ширину и высоту браузера после изменения размера окна пользователя

Question

Есть ли способ получить ширину и высоту браузера после изменения размера окна. Например, если окно 1920 на 1080, и пользователь меняет окно на 500 на 500, есть ли способ получить эти два новых значения в JavaScript или jquery?

Answer 1

Возможно прослушать resize событие.

$(window).resize(function() { 
    var width = $(window).width(); 
    var height = $(window).height(); 
}) 

Answer 2

Используйте метод изменения размера jQuery для изменения размера окна. внутри обратного вызова вы можете получить высоту и ширину.

$(window).resize(function(){ 
    var width = $(window).width(); 
    var height = $(window).height(); 

}); 

Answer 3

Вы можете использовать resize событие, наряду с height() и width() свойствами

$(window).resize(function(){ 
    var height = $(window).height(); 
    var width = $(window).width(); 
}); 

See some more examples here

Answer 4

Вы можете использовать JQuery размер() функцию. Также убедитесь, что вы добавили одну и ту же логику изменения размера для перезагрузки события. Если пользователь перезагружается в размерном окне, ваша логика не будет работать.

$(window).resize(function() { 
         $windowWidth = $(window).width(); 
          $windowHeight = $(window).height(); 
         }); 

$(document).ready(function() { 
     //same logic that you use in the resize... 
    }); 

Answer 5

Чистый JavaScript Ответ:

var onresize = function() { 
    //your code here 
    //this is just an example 
    width = document.body.clientWidth; 
    height = document.body.clientHeight; 
} 
window.addEventListener("resize", onresize); 

Это прекрасно работает на хроме. Однако он работает только на хроме. Несколько более кросс-браузерный пример использует целевые свойства события «outerWidth» и «outerHeight», поскольку в этом случае «target» - это само окно. Код будет как этого

var onresize = function(e) { 
    //note i need to pass the event as an argument to the function 
    width = e.target.outerWidth; 
    height = e.target.outerHeight; 
} 
window.addEventListener("resize", onresize); 

Это отлично работает в Firefox и хром

Надеется, что это помогает :)

Edit: Испытано в IE9 и это сработало тоже :)

Answer 6

Практически, Я пользуюсь этим, и мне это очень помогает:

var TO = false; 
    var resizeEvent = 'onorientationchange' in window ? 'orientationchange' : 'resize'; 
    $(window).bind(resizeEvent, function() { 
     TO && clearTimeout(TO); 
     TO = setTimeout(resizeBody, 200); 
    }); 
    function resizeBody(){ 
     var height = window.innerHeight || $(window).height(); 
     var width = window.innerWidth || $(window).width(); 
     alert(height); 
     alert(width); 
    } 

Answer 7

Если вам нужно знать эти значения, чтобы сделать layo я корректирую, я готов поспорить, что вы планируете слушать эти ценности. Вместо этого я рекомендовал использовать API Window.matchmedia().

Это much more performant и в основном эквивалент JS-запросов CSS-медиа.

Очень быстрый пример использования:

if (window.matchMedia("(max-width: 500px)").matches) { 
    /* the viewport is less than or exactly 500 pixels wide */ 
} else { 
    /* the viewport is more than 500 pixels wide */ 
} 

Вы также можете настроить слушатель, который будет вызываться каждый раз, когда изменяется состояние matches собственности.

См. MDN для description и example of using a listener.