Я ищу разумный способ контролировать и обрабатывать стандартную функцию изменения размера / увеличения в браузере.Цель состоит в том, чтобы переопределить функцию по умолчанию и использовать эту функцию для управления размером определенных элементов на моей странице.
После некоторых обширных исследований я выкинул свой общий метод для включения:
- Использование
rem для управления размером элементов. - Использование события
resize в браузере для запуска изменения размера.
IСразу отметим, что я использую Firefox 62, и провел некоторое тестирование на Chrome 69.
1.Используя rem для управления размером элементов:
Используя rem, я могу более точно настроить то, что масштабируется при изменении размера страницы.Другой вариант использовал transform: scale(), который мне, возможно, придется использовать в зависимости от ответов на этот вопрос.
Вот фрагмент кода html & css, показывающий это:
<style type="text/css">
@keyframes size { 0% { font-size: 62.5% } 25% { font-size: 100% } 50% { font-size: 62.5% } 75% { font-size: 25% } 100% { font-size: 62.5% } }
:root { font-size: 62.5%; /* gives a base factor of 10px */ animation: size 10s infinite; }
div { padding: 40px; width: 200px; font-size: 40px; background: steelblue; text-align: center; margin: 16px; }
div.zoomer { padding: 4rem; width: 20rem; font-size: 4rem; background: steelblue; text-align: center; margin: 16px; }
/* note that the margins are set to px on both versions (technically unnecessary but for illustration) and it can be controlled what gets resized */
</style>
<body>
<div>px</div>
<div class="zoomer">rem</div>
</body>
2.Использование события resize в браузере для запуска изменения размера.
Именно здесь начинаются проблемы.
Я исследовал различные события «увеличения», которые могу прослушивать.К ним относятся wheel и keypress:
window.addEventListener('wheel',e => {
if (e.ctrlKey) {
e.preventDefault();
// zoom handler
}
});
window.addEventListener('keypress',e => {
if ((e.charCode===61||e.charCode===45)&&e.ctrlKey) { // ctrl+, ctrl-
e.preventDefault();
// zoom handler
}
});
Но главное событие масштабирования - resize, и для него гораздо больше смысла слушать:
window.addEventListener('resize',handler);
НекоторыеПричины для прослушивания события resize:
- Помимо
ctrl+, ctrl- и ctrl[mousewheel] в качестве методов масштабирования, есть также раздел меню браузера (гамбургер)-меню в правом верхнем углу браузера), который позволяет нажимать +, - и в некоторых случаях изменять масштаб на 100%.Единственное событие, которое я обнаружил - это событие resize. - Теоретически вы можете запустить собственное событие
resize, которое затем будет обработано должным образом.Т.е., если у вас была пользовательская кнопка: <button type="button" onclick="myZoomFunction(amount)">Zoom In</button> на самой веб-странице. - Семантика
Проблемы с прослушиванием resize, которые я обнаружил:
- Не похоже, что
preventDefault() работает с событием resize.Поэтому вы не можете остановить браузер от масштабирования (хотя вы можете использовать preventDefault() на wheel и click, чтобы остановить масштабирование). - Объект
event, который передается, не выглядитвключить любые данные, если масштаб был увеличен или уменьшен (что я могу найти).
Например:
window.addEventListener('resize', e => {
e.preventDefault(); // doesn't do anything.
console.log(e.defaultPrevented); // false
myZoomFunction(e.resizePropertyThatDoesNotExist);
})
// obviously this function is a conjecture as I need to figure out what values I can actually get passed in.
function myZoomFunction(amount) {
const CURRENT_ROOT_FONT_SIZE_PX = Number.parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('font-size').replace(/\D+/g,''));
return document.documentElement.style.fontSize = `${CURRENT_ROOT_FONT_SIZE_PX+amount}px`;
}
Я пытаюсь решить эти две проблемы, еслиУ кого-нибудь есть идеи.