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

[borus]

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

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

[npofopr]

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

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

[by chris]

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

 

[borus]

  On 3/22/2016 at 6:47 AM, npofopr said:

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

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

Expand  

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

Edited March 22, 2016 by borus

[Great Rash]

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

 

[borus]

  On 3/22/2016 at 6:49 AM, by chris said:

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

 

Expand  

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

 

  On 3/22/2016 at 7:18 AM, Great Rash said:

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

 

Expand  

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

[Switch74]

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

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

[borus]

  On 3/22/2016 at 7:30 AM, Switch74 said:

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

Expand  

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

DOMContentLoaded

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

[Switch74]

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

[borus]

  On 3/22/2016 at 7:53 AM, Switch74 said:

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

Expand  

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

[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]

  On 3/22/2016 at 9:32 AM, Mary_RND said:

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

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

Expand  

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

[andrey7287]

  On 3/22/2016 at 7:25 AM, borus said:

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

Expand  

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

 

[Mary_RND]

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

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

[borus]

  On 3/22/2016 at 12:38 PM, Mary_RND said:

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

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

Expand  

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