#javascript #reactjs
#javascript #reactjs
Вопрос:
Привет, друзья, помогите мне, пожалуйста,
Я тестирую медиа-запрос в JavaScript, и он не работает должным образом. Условие выполняется с помощью меры раньше, например:
Если это так min-with: 992px , условие выполняется, когда ширина экрана превышает 893 пикселя.
Почему это происходит? Работа в ванильном JavaScript, если он работает идеально.
код
const mql = window.matchMedia("(min-width: 992px)");
useEffect(() => {
mql.addEventListener("change", resize);
function resize(e) {
if (e.matches) { // If media query matches
console.log(window.screen.width);
}
}
return () => {
mql.removeEventListener("change", resize);
}
},[mql]);
ЗАХВАТ
Комментарии:
1. Попробуйте вместо window.screen.width window.innerWidth . Screen.width — это ширина всего экрана, а не только ширина окна документа при фокусировке медиа-запроса.
2.
window.screenэто ссылка на экран операционной системы, на котором отображается окно браузера. Я получаю1920независимо от ширины окна.
Ответ №1:
Это работает. Проверено
useEffect(() => {
const mql = window.matchMedia("(min-width: 992px)");
mql.addEventListener("change", resize);
function resize(e) {
if (e.matches) { // If media query matches
console.log("more than 992");
} else {
console.log("less than 992")
}
}
return () => {
mql.removeEventListener("change", resize);
}
},[]);
Комментарии:
1. если вы помещаете mql вне useEffect и не запоминаете его (useMemo), то при каждом рендеринге вы создаете новый и запускаете useEffect, а затем при каждом рендеринге вы подключаете и отсоединяете прослушиватель событий. В этом нет необходимости
2. но это не работает для меня. эта ошибка сохраняется. спасибо, что ответили мне