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

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

0 голосов
/ 23 октября 2018

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

Вот что я попробовал после некоторого исследования 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')
}

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

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

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

1 Ответ

0 голосов
/ 23 октября 2018

Кажется, что вы на самом деле просто пропускаете инструкцию 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, вероятно, является более элегантным решением, но я хотел сказать, что вы действительно были достаточно близки, чтобы делать то, что вы хотели:)

...