Размеры экрана браузера

Очень часто, особенно при разработке адаптивной верстки, требуется вычислять размера окна браузера для перестройки какого-то объекта при определённом разрешении.

И тут появляется сюрприз, при котором браузер хром(chrome) неправильно выдает значение высоты или ширины окна. Именно окна браузера, а не документа. Связано это с тем, что Chrome считает ширину окна вместе со скроллом, поэтому значения могут получаться отличными, нежели в том же Firefox.

Вот здесь и понадобится нам нехитрый скрипт, который выдаст актуальные, правильные значения размеров окна браузера:

    
var windowWidth = window.innerWidth
     || document.documentElement.clientWidth
     || document.body.clientWidth;

var windowHeight = window.innerHeight
     || document.documentElement.clientHeight
     || document.body.clientHeight;
console.log('windowWidth='+windowWidth+'\n'+'windowHeight='+windowHeight);
    

Для того, чтобы в любой момент знать размеры, повесим скрипт на ресайзинг окна:

    
function windowSize() {
	var windowWidth = window.innerWidth
			|| document.documentElement.clientWidth
			|| document.body.clientWidth;

	var windowHeight = window.innerHeight
			|| document.documentElement.clientHeight
			|| document.body.clientHeight;
	return {
		w:windowWidth,
		h:windowHeight
	}
}

$(document).ready(function(){
	var windowWidth = windowSize().w;
	var windowHeight = windowSize().h;
	$('#window_size').html('windowWidth=<b>'+windowWidth+'</b><br>'+'windowHeight=<b>'+windowHeight+'</b>')
});

$(window).resize(function(){
	var windowWidth = windowSize().w;
	var windowHeight = windowSize().h;
	$('#window_size').html('windowWidth=<b>'+windowWidth+'</b><br>'+'windowHeight=<b>'+windowHeight+'</b>')
})