0
102
2019-01-17

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

В данном посте поделюсь способом который поможет Вам определить какая ширина окна браузера на котором был открыт сайт. Функция очень похожа на всем известное решение в CSS @media
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

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

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

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

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

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

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

<script type="text/javascript">
//anonymous function to check all elements with class .fixMinMaxwidth
var fixMinMaxwidth=function()
{
       //only apply this fix to browsers without native support
       if (typeof document.body.style.maxHeight !== "undefined" &&
               typeof document.body.style.minHeight !== "undefined") return false;

       //loop through all elements
       $('.fixMinMaxwidth').each(function()
       {
               //get max and minwidth via jquery
               var maxWidth = parseInt($(this).css("max-width"));
               var minWidth = parseInt($(this).css("min-width"));

               //if min-/maxwidth is set, apply the script
               if (maxWidth>0 && $(this).width()>maxWidth) {
                       $(this).width(maxWidth);
               } else if (minWidth>0 && $(this).width()<minWidth) {
                       $(this).width(minWidth);
               }
       });
}

//initialize on domready
$(document).ready(function()
{
       fixMinMaxwidth();
});

//check after every resize
$(window).bind("resize", function()
{
       fixMinMaxwidth();
});
</script>

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

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

jQuery(document).ready(function($) {

  if ($(window).width() > 1000) {

    console.log('Ширина экрана больше 1000 пикселей');

  } else {

    console.log('Ширина экрана МЕНЬШЕ 1000 пикселей');

  }

});