Почему innerWidth в JS реагирует и на высоту экрана?

Question

[Cheizer]

Друзья, не могу понять, подскажите, почему данная конструкция реагирует и на высоту экрана - браузера?

var $window = $(window),
flexslider = { vars:{} };

function getGridSize() { 
if (window.innerWidth < 480) {
return 1
}else if (window.innerWidth < 1225) {
return 3
}else{
return 4
}
}

Когда я панель открываю в браузере devTools снизу, или просто по высоте ужимаю, окно просмотра браузера изменяется по высоте, и срабатывает это условие, но блин какого хрена? Указанно то window.innerWidth почему так?

Comments

[Шохрух Шаймардонов]

Во первых, зачем 1ая строка???
Во вторых. Вы уверены что, хоть когда-нибудь получите 1??
В третьих дело в том, что вы не разобрались как эти события работают.

Подсказка. При изменении размера окна хоть в 1 направлении он перерисовывает все окно!

[Cheizer]

Шохрух Шаймардонов, конечно 1 на мобилке возвращает, это для слайдера.

$('.carousel').flexslider({
.....
       minItems: getGridSize(),
        maxItems: getGridSize(),
.....	  
          start: function(slider){
            flexslider = slider;
          }
        });

И если на jquery сделать с var $width = $(window).width(); то при изменении высоты не срабатывает, и правильно. Но мне нужно с innerWidth разобраться, или переписывать на Jquery

Answer 1

[Антон Усачев]

Да, условие стоит на window.innerWidth, но слушаешь ты по-любому window.resize, так? Как правильно заметил Владимир, у тебя выход из условия. Привяжи условие к ширине, и все будет норм:

var $window = $(window),
	flexSlider = {
		vars: {}
	};

function getGridSize() {
	var iW = $window.innerWidth();
	
	if (iW < 1225 && iW >= 480) {
		console.log('< 1225 && >= 480');
	} else if (iW < 480) {
		console.log('< 480');
	} else if (iW >= 1225) {
		console.log('>= 1225');
	}
	
	console.log(iW);
}

$window.on('resize', function() {
	getGridSize();
});