Какой букет событий надо завязать для отлова мобильника либо на изменение экрана

[borus]

Здравствуйте.

Есть потребность отловить устройства с шириной экрана менее Х пикселей в момент загрузки страницы либо те, которые после смены ориентации в пространстве приобретают ширину менее Х пикселей. Как можно описать это комплексное событие? Можно ли записать эти два условия через ИЛИ?

[npofopr]

https://github.com/hgoebl/mobile-detect.js

вроде разное умеет, не смотрели?

[by chris]

@media all and (max-width: 640px) {
  ...
}

 

[borus]

Только что, npofopr сказал:

https://github.com/hgoebl/mobile-detect.js

вроде разное умеет, не смотрели?

Спасибо. Это здорово, только не хотелось бы подключать дополнительный файл, а использовать встроенные возможности языка

Edited March 22, 2016 by borus

[Great Rash]

window.addEventListener('DOMContentLoaded', function() {
  if (window.innerWidth <= 1024) {
    console.log('допустим, что это у нас планшет или мобилка с гигантским экраном');
  }
});

 

[borus]

Только что, by chris сказал:

@media all and (max-width: 640px) {
  ...
}

 

Спасибо. Не подойдёт, мне надо по событию добавлять либо убирать определённый класс

 

Только что, Great Rash сказал:

window.addEventListener('DOMContentLoaded', function() {
  if (window.innerWidth <= 1024) {
    console.log('допустим, что это у нас планшет или мобилка с гигантским экраном');
  }
});

 

благодарю. а как суда добавить через ИЛИ событие на изменение ширины экрана ниже критической?

[Switch74]

else if(window.innerWidth <= 640) {
...}

но лучше идти от меньшего к большему

[borus]

Только что, Switch74 сказал:

но лучше идти от меньшего к большему

благодарю Это все на событие 

DOMContentLoaded

а как добавить через ИЛИ событие смены ширины экрана?

[Switch74]

а поточнее можно про ИЛИ и событие

[borus]

Только что, Switch74 сказал:

а поточнее можно про ИЛИ и событие

есть код, который должен выполняться после проверки ширины экрана в момент загрузки страницы ЛИБО если человек повернул свой девайс в другую ориентацию, и ширина экрана у него стала другой

[Switch74]

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

window.addEventListener('DOMContentLoaded', function() {resize()});
window.addEventListener('resize', function() {resize()});
function resize(){
  if (window.innerWidth <= 640) {
    console.log('допустим, что это у нас планшет или мобилка с маленьким экраном');
  }
  else if (window.innerWidth <= 1024) {
    console.log('допустим, что это у нас планшет или мобилка с гигантским экраном');
  }
}

 

[borus]

спасибо.

я думал может есть что-то покороче вроде

window.addEventListener('DOMContentLoaded'||'resize', function() {resize()});

Edited March 22, 2016 by borus

[Mary_RND]

А можно вопрос?

DOMContentLoaded и resize  - это получаются классы, которые добавляются?

[borus]

Только что, Mary_RND сказал:

А можно вопрос?

DOMContentLoaded и resize  - это получаются классы, которые добавляются?

нет, это события

[andrey7287]

4 часа назад, borus сказал:

Спасибо. Не подойдёт, мне надо по событию добавлять либо убирать определённый класс

 Почему нет то, медиазапросы на поворот тоже срабатывают.   

 

[Mary_RND]

А вот вопрос, мне надо чтобы меню на iPad.. или телефоне, открывал меню по клику, при этом на компьютере оно должно остаться на hover..

Мне по сути по такой же системе надо делать?

[borus]

В 21.03.2016 в 16:38, Mary_RND сказал:

А вот вопрос, мне надо чтобы меню на iPad.. или телефоне, открывал меню по клику, при этом на компьютере оно должно остаться на hover..

Мне по сути по такой же системе надо делать?

я советую вам использовать готовый фреймворк для построения меню, типа бутстрап, если конечно вам не надо думать о том, как это всё работает.