TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

JavaScript – Как определить, больше ли ширина экрана или аналог @media запросов в CSS

5 168

Иногда вам может понадобиться выполнить код на основе условия зависящего от разришения браузера.

Ведь всегда найдется какой-то фрагмент сайта, который, который вы хотите показать на больших экранах, но не на маленьких экранах (таких маленьких как у большинства смартфонов например) из-за их ограниченного пространства экрана.

Создание кода для определения определенного типа устройства – сложная область, с которой разработчики часто не могут справиться сразу но все таки быстрое решение есть. И оно основывается на ширине устройства.

Как динамически определять ширину экрана в пикселях

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

Вставьте следующий код в консоль браузера или онлайн-редактор, например 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"); } });

Теперь начните изменять размер окна браузера от узкого к широкому, и наблюдайте, как консоль разработчика отправляет Вам сообщения о текущей ширене окна браузера.

Gif-видео, показывающее обновление консоли сообщениями console.log в зависимости от того, больше или меньше размер экрана 500px

Пример в CodePen

Как работает код JavaScript

  • Сначала мы присоединяем addEventListener() метод к объекту окна.
  • Внутри слушателя события мы устанавливаем два аргумента, ‘resize’ и function() {}.
  • Первый аргумент – запросить прослушиватель событий, прослушивать события изменения размера (даже часть изменения размера будет зарегистрирована как событие). Затем мы запускаем анонимную функцию на основе события resize.
  • Внутри тела анонимной функции мы инициируем два условных утверждения.
  • Первое условие: «если ширина экрана (любого устройства) составляет не менее 500 пикселей, то console.log (« сделать что-то »). Второе условие: «Если ширина экрана меньше 500 пикселей, то console.log (« сделать что-то еще »).

Захват ширины у браузеров без встроенной поддержки (для разного старья, которым не кто по факту уже и не пользуется).

Этот скрипт проверяет все элементы с классом .fixMinMaxwidth и наблюдает за окном. Он применяется только к браузерам без встроенной поддержки минимальной / максимальной ширины, например ie6 и ниже. Изменение размера окна также не будет проблемой.

jQuery вариант срипта для обработки ширины экрана

Ниже я предоставляю Вам вариант, который делает почти тоже самое что и скрипт Выше но на jQuery.

Пример отработки скрипта в зависимости от диапазона ширины экрана

Источник записи:

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее