Показать сообщение отдельно
  #6 (permalink)  
Старый 15.10.2023, 22:21
Новичок на форуме
Отправить личное сообщение для alex_88 Посмотреть профиль Найти все сообщения от alex_88
 
Регистрация: 30.01.2023
Сообщений: 4

Всем доброго времени суток! Выкладываю пример рабочего кода по отслеживанию масштабирования на телефоне (возможно кому-то еще пригодится):
<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
Ответить с цитированием