1

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

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

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

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

let resolution = window.innerWidth 

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

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

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

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

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

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

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

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

1 ответ 1

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)
1
  • и всё же я уточню: а надо ли вообще такая фича?
    – user348432
    28 июл 2020 в 23:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.