Я создал свое приложение, используя react и styled-components. Все это выполняется на стороне клиента и маршрутизируется.
Вся моя адаптивная компоновка основана на значении window.innerWidth, и я делаю много:
const MyComponent_DIV = styled.div`
width: ${props => props.isMobile ? "200px" : "400px"};
`;
const [windowWidth,setWindowWidth] = useState(window.innerWidth);
... some code
return (
<MyComponent_DIV
isMobile={windowWidth <= 768}
/>
);
ПРИМЕЧАНИЕ: Я также прикрепляю прослушиватель событий resize , поэтому мое приложение реагирует на события resize. Пока все хорошо.
function handleResize() {
console.log("FROM RESIZE: " + window.innerWidth); // I CAN SEE THIS VALUE CHANGING WHEN ZOOMING IN AND OUT
setWindowWidth(window.innerWidth);
}
Но странная вещь, по крайней мере для меня, заключается в том, что когда я обнаружил, что изменение уровня ZOOM в браузере (на настольном и мобильном устройствах) влияет на значение window.innerWidth . И также запускается событие resize.
То, что я пытаюсь выполнить sh:
- Быть отзывчивым на изменение размера событий, но не на " События ZOOM "
- Когда пользователь изменяет уровень масштабирования, я хочу, чтобы мой макет оставался неизменным, и отображал полосу прокрутки при увеличении.
- По сути, я хочу, чтобы масштабирование работало нормально, как увеличение и не вызывать повторную визуализацию в моем приложении.
ДОПОЛНИТЕЛЬНО:
Это мой мета-видовой экран тег:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, shrink-to-fit=no">
ВОПРОС
Имеет ли смысл событие масштабирования изменить свойство window.innerWidth? Я имею в виду, разве это не противоречит интуиции?
Как мне избежать этого или, по крайней мере, сделать обходной путь для моего приложения, которое будет вести себя так, как мне нужно?