У меня есть функция 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? Но я не знаю, как это реализовать.
Если бы кто-нибудь мог мне помочь и сказать, что я делаю неправильно / упускаю, это было бы здорово!
Заранее спасибо, и если вам что-нибудь понадобится, дайте мне знать!
Используйте для этого медиа-запрос. Обнюхивание клиентов чрезвычайно сложно поддерживать и считается плохой практикой.
Например, мой мобильный телефон - это телефон Jolla (который будет пропущен вашим JS - медиа-запрос не будет).
@ADyson, как бы это перенести в CSS? какая у: hover версия "при нажатии"? Правильно ли я думал, что сделал бы: button: active popup {width 33%; } и то же самое внутри моих медиа-запросов с разной шириной?
весь смысл отзывчивости заключается в том, что это происходит автоматически, и пользователю не нужно нажимать на что-либо, чтобы заставить его работать. Страница (и элементы внутри нее) просто изменят свой размер без запроса. Но если вы хотите установить стиль, который применяется только к тому, на что в данный момент нажимают, тогда да, вы бы использовали: active. И вы бы установили значение по-разному для каждого медиа-запроса, где вам нужно изменить его (например, чтобы иметь разную ширину для мобильных устройств / настольных компьютеров / планшетов). Не знаете, почему вы хотите изменять ширину кнопки только при нажатии?
@ADyson Извините, я запутал вас, я пытался объяснить CSS, который я использовал; Поэтому, когда кнопка нажата, установите ширину всплывающего окна. Не по ширине кнопки :)
вам не нужно ждать щелчка, чтобы установить ширину всплывающего окна, вы можете предварительно определить его (как заданное значение или%) для каждого отдельного диапазона ширины (указанного в ваших медиа-запросах), который вы хотите служба поддержки. Все остальное сделает браузер. Серьезно, возьмите руководство по адаптивному дизайну, и все станет ясно.
Я понимаю адаптивный дизайн, я говорю о том, что до того, как кнопка будет нажата, ширина «всплывающего окна» установлена на 0; поэтому он скрыт с главной страницы, тогда при нажатии его ширина будет либо 100vw, либо 33vw в зависимости от устройства, я не знал, что для этого существует только метод CSS
Вместо использования ширины, чтобы скрыть всплывающее окно, вы должны использовать его свойство display, что является обычным способом. Таким образом, JS будет использоваться только для отображения или скрытия всплывающего окна при щелчках (путем установки свойства display), а ширина обрабатывается CSS.
Кажется, что на самом деле вам просто не хватает оператора 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, вероятно, является более элегантным решением, но я хотел бы вам сказать, что вы действительно были довольно близки к тому, что планировали :)
вам, вероятно, будет лучше создать адаптивный дизайн с помощью CSS