Настройте функцию Javascript для мобильных устройств

У меня есть функция JS, которая открывает всплывающие окна, изменяя ширину в CSS с 0 до заданного числа. Моя цель - установить ширину 33vw на экранах настольных компьютеров и 100vw на мобильных устройствах, чтобы они были отзывчивыми.

Вот что я попробовал после некоторых исследований SO:

function openNav() {
  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && (window.innerWidth < window.innerHeight) ){
    document.getElementById("Nav").style.width = "100%";
  }
  document.getElementById("Nav").style.width = "33%";
  $('body').addClass('stop-scrolling')
}

Я не очень продвинут в JS, но мне кажется, что я близок и, возможно, просто пропускаю инструкцию ELSE? Но я не знаю, как это реализовать.

Если бы кто-нибудь мог мне помочь и сказать, что я делаю неправильно / упускаю, это было бы здорово!

Заранее спасибо, и если вам что-нибудь понадобится, дайте мне знать!

вам, вероятно, будет лучше создать адаптивный дизайн с помощью CSS

ADyson 23.10.2018 13:52

Используйте для этого медиа-запрос. Обнюхивание клиентов чрезвычайно сложно поддерживать и считается плохой практикой.

connexo 23.10.2018 13:57

Например, мой мобильный телефон - это телефон Jolla (который будет пропущен вашим JS - медиа-запрос не будет).

connexo 23.10.2018 14:11

@ADyson, как бы это перенести в CSS? какая у: hover версия "при нажатии"? Правильно ли я думал, что сделал бы: button: active popup {width 33%; } и то же самое внутри моих медиа-запросов с разной шириной?

Marcus Williams 23.10.2018 15:08

весь смысл отзывчивости заключается в том, что это происходит автоматически, и пользователю не нужно нажимать на что-либо, чтобы заставить его работать. Страница (и элементы внутри нее) просто изменят свой размер без запроса. Но если вы хотите установить стиль, который применяется только к тому, на что в данный момент нажимают, тогда да, вы бы использовали: active. И вы бы установили значение по-разному для каждого медиа-запроса, где вам нужно изменить его (например, чтобы иметь разную ширину для мобильных устройств / настольных компьютеров / планшетов). Не знаете, почему вы хотите изменять ширину кнопки только при нажатии?

ADyson 23.10.2018 15:09

@ADyson Извините, я запутал вас, я пытался объяснить CSS, который я использовал; Поэтому, когда кнопка нажата, установите ширину всплывающего окна. Не по ширине кнопки :)

Marcus Williams 23.10.2018 15:32

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

ADyson 23.10.2018 15:43

Я понимаю адаптивный дизайн, я говорю о том, что до того, как кнопка будет нажата, ширина «всплывающего окна» установлена ​​на 0; поэтому он скрыт с главной страницы, тогда при нажатии его ширина будет либо 100vw, либо 33vw в зависимости от устройства, я не знал, что для этого существует только метод CSS

Marcus Williams 23.10.2018 18:17

Вместо использования ширины, чтобы скрыть всплывающее окно, вы должны использовать его свойство display, что является обычным способом. Таким образом, JS будет использоваться только для отображения или скрытия всплывающего окна при щелчках (путем установки свойства display), а ширина обрабатывается CSS.

ADyson 23.10.2018 19:37
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
9
297
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Кажется, что на самом деле вам просто не хватает оператора else - в том виде, в каком он есть прямо сейчас, вы сначала проверяете, используете ли вы мобильное устройство (и находитесь ли вы в портретном режиме!), А затем, независимо от в результате вы перезаписываете ширину навигации на 33%.

Вот это крошечное исправление:

function openNav() {
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && (window.innerWidth < window.innerHeight) ){
        document.getElementById("Nav").style.width = "100%";
    } else {
        document.getElementById("Nav").style.width = "33%";
        $('body').addClass('stop-scrolling');
    }
}

Редактировать: Как некоторые люди прокомментировали под вашим вопросом, медиа-запрос CSS, вероятно, является более элегантным решением, но я хотел бы вам сказать, что вы действительно были довольно близки к тому, что планировали :)

Другие вопросы по теме