Как выполнить скрипт при повороте экрана?

Question

[Сергей Горячев]

Как скрыть блок div при смене ориентации экрана?
Допустим, зашел человек на сайт с телефона, открыл меню, повернул экран.
Нужно скрыть меню при повороте.
Пробовал

jQuery(window).resize(function () {
jQuery("#mainmenu").hide(0);
});

Но тут меня ожидала боль.
Меню большое и при скроллинге на телефонах оно пропадает.

Comments

[sanns]

а причем тут скроллинг?

[Сергей Горячев]

Думаю, что это как-то связано с тем, что при скролле размер браузера меняется.
В частности, адресная строка на айфоне становится уже, и срабатывает ресайз.

Answer 1

[Виталий Инчин ☢]

nikitakiselev.ru/post/42

Comments

[Сергей Горячев]

Дааааа! Спасибо! То, что нужно!!!

Answer 2

[Сергей Горячев]

window.addEventListener("orientationchange", function() {
    	jQuery("#mainmenu").hide(0);
    }, false);

Спасибо за ответ Виталий Инчин ☢ , использовал это, работает отлично.
Потестирую на разных девайсах, но пока корректно все.

Answer 3

[Pavel Torbeev]

Вам поможет свойство media css конкретнее aspect-ratio параметр

Answer 4

[Фаёзжон Бердиев]

$(window).on('resize',function(){$('#mainmenu').hide()});

Comments

[Сергей Горячев]

Та же самая боль при скроллинге. Меню больше экрана и оно пропадает, когда пытаешься крутить вниз.

[Фаёзжон Бердиев]

Может обойтись с mediaqueries ?

[Сергей Горячев]

Фаёзжон Бердиев: Да мне не критично jQuery, мне бы уже главное, чтобы работало)

[begovik]

resize не подходит для отслеживания смены ориентации, т.к. реагирует так-же на смену размера, при появлении клавиатуры.

Answer 5

[Сергей Василенко]

Jquery

$(window).on('orientationchange', function(e) {
// код
});

Некоторые устройства не поддерживают событие orientationchange,
поэтому можно отловить изменение размера окна.
Поэтому лучше так

$( window ).on('load resize orientationchange', function( event ) {
  // код
});

// Вы также можете вручную запустить это событие.
$( window ).orientationchange();