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

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

2 285

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

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

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

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

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

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

[iframe src=https://codepen.io/StrengthandFreedom/embed/mpqwWB]

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

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

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

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

<span class="hljs-tag"><<span class="hljs-name">script</span> ></span><span class="handlebars"><span class="xml"><span class="hljs-tag"><<span class="hljs-name">br</span>></span>//anonymous function to check all elements with class .fixMinMaxwidth<span class="hljs-tag"><<span class="hljs-name">br</span>></span>var fixMinMaxwidth=function()<span class="hljs-tag"><<span class="hljs-name">br</span>></span>{<span class="hljs-tag"><<span class="hljs-name">br</span>></span> //only apply this fix to browsers without native support<span class="hljs-tag"><<span class="hljs-name">br</span>></span> if (typeof document.body.style.maxHeight !== "undefined" &&<span class="hljs-tag"><<span class="hljs-name">br</span>></span> typeof document.body.style.minHeight !== "undefined") return false;<span class="hljs-tag"><<span class="hljs-name">br</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span> //loop through all elements<span class="hljs-tag"><<span class="hljs-name">br</span>></span> $('.fixMinMaxwidth').each(function()<span class="hljs-tag"><<span class="hljs-name">br</span>></span> {<span class="hljs-tag"><<span class="hljs-name">br</span>></span> //get max and minwidth via jquery<span class="hljs-tag"><<span class="hljs-name">br</span>></span> var maxWidth = parseInt($(this).css("max-width"));<span class="hljs-tag"><<span class="hljs-name">br</span>></span> var minWidth = parseInt($(this).css("min-width"));<span class="hljs-tag"><<span class="hljs-name">br</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span> //if min-/maxwidth is set, apply the script<span class="hljs-tag"><<span class="hljs-name">br</span>></span> if (maxWidth>0 && $(this).width()>maxWidth) {<span class="hljs-tag"><<span class="hljs-name">br</span>></span> $(this).width(maxWidth);<span class="hljs-tag"><<span class="hljs-name">br</span>></span> } else if (minWidth>0 && $(this).width()<span class="hljs-tag"><<span class="hljs-name">minWidth)</span> {<<span class="hljs-attr">br</span>></span> $(this).width(minWidth);<span class="hljs-tag"><<span class="hljs-name">br</span>></span> }<span class="hljs-tag"><<span class="hljs-name">br</span>></span> });<span class="hljs-tag"><<span class="hljs-name">br</span>></span>}<span class="hljs-tag"><<span class="hljs-name">br</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span>//initialize on domready<span class="hljs-tag"><<span class="hljs-name">br</span>></span>$(document).ready(function()<span class="hljs-tag"><<span class="hljs-name">br</span>></span>{<span class="hljs-tag"><<span class="hljs-name">br</span>></span> fixMinMaxwidth();<span class="hljs-tag"><<span class="hljs-name">br</span>></span>});<span class="hljs-tag"><<span class="hljs-name">br</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span>//check after every resize<span class="hljs-tag"><<span class="hljs-name">br</span>></span>$(window).bind("resize", function()<span class="hljs-tag"><<span class="hljs-name">br</span>></span>{<span class="hljs-tag"><<span class="hljs-name">br</span>></span> fixMinMaxwidth();<span class="hljs-tag"><<span class="hljs-name">br</span>></span>});<span class="hljs-tag"><<span class="hljs-name">br</span>></span></span></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>

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

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

jQuery(document).ready(function($) { if ($(window).width() > 1000) { console.log('Ширина экрана больше 1000 пикселей'); } else { console.log('Ширина экрана МЕНЬШЕ 1000 пикселей'); } });

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

// отт769px доо1024px<span class="hljs-tag"><<span class="hljs-name">br</span>></span>jQuery(document).ready(function($){<span class="hljs-tag"><<span class="hljs-name">br</span>></span>window.addEventListener("resize", function() {<span class="hljs-tag"><<span class="hljs-name">br</span>></span> if (window.matchMedia("(min-width: 769px)").matches && window.matchMedia("(max-width: 1024px)").matches) {<span class="hljs-tag"><<span class="hljs-name">br</span>></span> console.log("✅✅✅ Ширина экрана от 769px до 1024px");<span class="hljs-tag"><<span class="hljs-name">br</span>></span> } else {<span class="hljs-tag"><<span class="hljs-name">br</span>></span> console.log("~~???? Ширина экрана не в диапазоне");<span class="hljs-tag"><<span class="hljs-name">br</span>></span> }<span class="hljs-tag"><<span class="hljs-name">br</span>></span>});<span class="hljs-tag"><<span class="hljs-name">br</span>></span>});

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

Leave A Reply

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