Иногда вам может понадобиться выполнить код на основе условия зависящего от разришения браузера.
Ведь всегда найдется какой-то фрагмент сайта, который, который вы хотите показать на больших экранах, но не на маленьких экранах (таких маленьких как у большинства смартфонов например) из-за их ограниченного пространства экрана.
Создание кода для определения определенного типа устройства – сложная область, с которой разработчики часто не могут справиться сразу но все таки быстрое решение есть. И оно основывается на ширине устройства.
Как динамически определять ширину экрана в пикселях
К счастью, гораздо проще ориентироваться на размеры экрана, основываясь на значениях пикселей, эта функция полезна во многих ситуациях.
Вставьте следующий код в консоль браузера или онлайн-редактор, например CodePen:
window.addEventListener("resize", function() {
if (window.matchMedia("(min-width: 500px)").matches) {
console.log("Screen width is at least 500px");
} else {
console.log("Screen less than 500px");
}
});
Теперь начните изменять размер окна браузера от узкого к широкому, и наблюдайте, как консоль разработчика отправляет Вам сообщения о текущей ширене окна браузера.
Пример в CodePen
Как работает код JavaScript
- Сначала мы присоединяем addEventListener() метод к объекту окна.
- Внутри слушателя события мы устанавливаем два аргумента, ‘resize’ и function() {}.
- Первый аргумент – запросить прослушиватель событий, прослушивать события изменения размера (даже часть изменения размера будет зарегистрирована как событие). Затем мы запускаем анонимную функцию на основе события resize.
- Внутри тела анонимной функции мы инициируем два условных утверждения.
- Первое условие: «если ширина экрана (любого устройства) составляет не менее 500 пикселей, то console.log (« сделать что-то »). Второе условие: «Если ширина экрана меньше 500 пикселей, то console.log (« сделать что-то еще »).
Захват ширины у браузеров без встроенной поддержки (для разного старья, которым не кто по факту уже и не пользуется).
Этот скрипт проверяет все элементы с классом .fixMinMaxwidth и наблюдает за окном. Он применяется только к браузерам без встроенной поддержки минимальной / максимальной ширины, например ie6 и ниже. Изменение размера окна также не будет проблемой.
jQuery вариант срипта для обработки ширины экрана
Ниже я предоставляю Вам вариант, который делает почти тоже самое что и скрипт Выше но на jQuery.
Пример отработки скрипта в зависимости от диапазона ширины экрана