Как в jquery media отслеживать ориентацию?

Question

[litash]

ребят есть медиа запрос в jq.
if(window.matchMedia('(max-width: 991px)').matches) {
$('.caption').click(function(){
$(this).siblings('.info-descr').slideToggle();
$(this).find('.right-arrow').toggleClass('rotate');
});
}

но при переходе в landscape ориентацию, код срабатывает тоже, а там уже 1024px ширина приходится обновлять страницу чтобы код уже не работал.
Как сделать что бы оно отслеживало изменения при переходе в portrait срабатывал код, при переходе в landscape не работал? я гуглил много. пробовал варианты с
window.addEventListener("orientationchange", function() {
if (window.matchMedia("(orientation: portrait)").matches) {
alert("PORTRAIT")
}
if (window.matchMedia("(orientation: landscape)").matches) {
alert("LANSCAPE")
}
}, false);

Но все работало коряво. Видимо я чего то не догоняю и не понимаю где должна быть функция а где нет. Прошу помощи.

Answer 1

[Андрей]

Портретный от альбомного отличается только соотношением сторон, поэтому лучше всего обнаруживать смену при событии resize
Вот, например
https://jsfiddle.net/6t6fbkcy/7/

Comments

[litash]

спасибо) попробую!

[litash]

попробовал. почему то когда мы кликаем в портрете на блок а потом разворачиваем в landscape то клик все равно работает уже в landscape( я делал даже unbind для события клик когда мы в landscape но он срабатывает только если мы сразу в landscape а когда в portrait и переходим в landscape то клик все равно работает. Я возможно запутал тебя но я описал проблему)

[Андрей]

litash, если бы можно было увидеть код, можно было бы сказать в чем проблема

[litash]

Андрей, все) спасибо большое! разобрался!)

Answer 2

[Ivanq]

Ну например

$('.caption').click(function(){
if(window.matchMedia('(max-width: 991px)').matches) {
$(this).siblings('.info-descr').slideToggle();
$(this).find('.right-arrow').toggleClass('rotate');
}
});

Comments

[litash]

не помогло, при переходе в landscape видны изменения с portrait((