Переключение функционала при разном разрешении экрана

Question

На сайте есть слайдер.

Для desktop разрешения есть функция desctopSlider(), которая создает пару кнопок назад/вперед и таким образом его переключает.

Еще есть функция mobileSlider(), которая уже по результатам считывания touchstart и touchend переключает этот же слайдер.

Я могу узнать ширину экрана создав переменную:

let resolution = window.innerWidth

и написать что то подобное:

document.addEventListener("DOMContentLoaded", () => {
    let resolution = window.innerWidth
    
    if (resolution >= 991) { // Примерно так
      desctopSlider();
    } else {
      mobileSlider();
    }
});

Но я понимаю, что если на ПК баловаться через консоль с разрешением экрана, то режимы слайдеров не будут переключаться.

Если изначально был экран выше 991px, то слайдер так и останется с кнопками переключений.

Если же уменьшить экран до значения ниже этого брейкпоинта и перезагрузить страницу, то будет задействована мобильная версия слайдера и уже увеличение экрана не вернет ничего обратно.

Лишь перезагрузка страницы поможет тогда.

Вопрос: нужно ли вообще продумывать динамическое переключение функционала сайта в зависимости от разрешения экрана или это лишние извращения?

Если нужно, то каким образом?

Answer 1

Для решения данной задачи Вам подойдут два event'a, resize и/или orientationchange:

const mobile_max_portrait = 600
const mobile_max_landscape = 960

const handleResize = () => {
    // в зависимости от выбранного метода замера
    // screen.width, window.innerWidth, etc.
    // может понадобиться задержка порядка 350ms
    // после срабатывания event'a
    // особенно такого как orientationchange
    // для того что бы размеры были посчитаны корректно
    const min = Math.min(screen.width, screen.height)
    const max = Math.max(screen.width, screen.height)

    if (min <= mobile_max_portrait && max <= mobile_max_landscape) {
       mobileSlider()
    } else {
       desctopSlider()
    }
}

document.addEventListener("resize", handleResize)

БЛОГ НА HUSL

Переключение функционала при разном разрешении экрана

Ответы (1 шт):