Можно ли отслеживать масштабирование сайта пользователями?

[alex_88]

Доброго времени суток!
Есть ли в JavaScript возможность выполнять какой либо код, когда пользователь масштабирует страницу сайта в браузере?
Например нужно добавить HTML-теги на странице при увеличении масштаба до определенного уровня, изменить некоторые стили.
Интересует возможно ли такое как на обычном компьютере в браузере, так и на мобильном телефоне, когда пользователь масштабирует страницу пальцами на тачпаде.

[рони]

alex_88,
https://stackoverflow.com/questions/...hange-listener
https://developer.mozilla.org/en-US/...dia/resolution

[alex_88]

Спасибо за ссылки, я почитал, поразбирался.
devicePixelRatio является постоянной величиной для конкретного пользователя, соответственно это свойство мне не подходит.
Разрешение устройства и медиа запросы, как я понимаю с масштабированием не связаны.
В интернете я не нашёл ответов на свой вопрос.
Я так понимаю в JavaScript нет возможности знать изменяется ли масштаб страницы или нет (например пользователь в браузере Opera масштабирует страницу нажатием клавиш Ctrl +)
Если я ошибаюсь, объясните пожалуйста

[рони]

alex_88,
может я тоже ошибаюсь, но в первой ссылке: примеры, как "поймать" изменение масштаба с помощью js, а вторая ссылка: изменение стилей при масштабировании с помощью css.

[alex_88]

Спасибо вам за помощь. Я протестировал пару примеров из этих ссылок.
https://stackoverflow.com/questions/...hange-listener
из этой ссылки использовал код:

(function updatePixelRatio(){
matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
.addEventListener('change', updatePixelRatio, {once: true});
console.log("devicePixelRatio: " + window.devicePixelRatio);
})();

В браузере google chrome на ноутбуке при масштабировании нажатием клавиш CTRL + , значение devicePixelRatio изменяется.
А вот на моем телефоне Redmi 9 (Андроид) при масштабировании страницы сайта devicePixelRatio не изменяется.
То есть для телефона нужен какой-то другой способ, если он существует.

из второй ссылки https://developer.mozilla.org/en-US/...dia/resolution
также попробовал пример.
В браузере google chrome на ноутбуке при масштабировании нажатием клавиш CTRL +, только при достижении масштаба 400 % изменяется фон текста.
На телефоне фон и текст при масштабировании остается неизменным.

Буду дальше разбираться способен ли javascript отслеживать масштабирование "пальцами" в браузере на мобильном телефоне.

[alex_88]

Всем доброго времени суток! Выкладываю пример рабочего кода по отслеживанию масштабирования на телефоне (возможно кому-то еще пригодится):

<div id="data"></div>

let viewport = window.visualViewport;
    console.log(viewport);

    let dataBlock = document.getElementById('data');

    function resizeHandler() {
        dataBlock.innerHTML += 'viewport.scale : ' + viewport.scale + "<br>";
        dataBlock.innerHTML += 'viewport.width : ' + viewport.width + "<br>";
        dataBlock.innerHTML += 'viewport.height : ' + viewport.height + "<br>";
        dataBlock.innerHTML += 'viewport.offsetLeft : ' + viewport.offsetLeft + "<br>";
        dataBlock.innerHTML += 'viewport.offsetTop : ' + viewport.offsetTop + "<br>";
        dataBlock.innerHTML += 'viewport.onresize : ' + viewport.onresize + "<br>";
        dataBlock.innerHTML += 'viewport.onscroll : ' + viewport.onscroll + "<br>";
        dataBlock.innerHTML += 'viewport.pageLeft : ' + viewport.pageLeft + "<br>";
        dataBlock.innerHTML += 'viewport.pageTop : ' + viewport.pageTop + "<br>";
        dataBlock.innerHTML += "<hr>";
    }
    window.addEventListener('load', resizeHandler);
    window.visualViewport.addEventListener('resize', resizeHandler);

На моем REDMI 9 работает. Отображается шаг масштабирования и еще некоторые полезные данные. У меня window.visualViewport.scale изменяется в диапазоне от 0.4 до 5. Очень удобно что после перезагрузки страницы текущий масштаб сохраняется, и свойство window.visualViewport.scale также остается правильным.

По этой ссылке нашел ответ на свой вопрос
https://stackoverflow.com/questions/...nch-level-zoom