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

2

Для решения данной задачи Вам подойдут два 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
  • и всё же я уточню: а надо ли вообще такая фича? 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.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.