Javascript.RU

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

Можно ли отслеживать масштабирование сайта пользователями?
Доброго времени суток!
Есть ли в JavaScript возможность выполнять какой либо код, когда пользователь масштабирует страницу сайта в браузере?
Например нужно добавить HTML-теги на странице при увеличении масштаба до определенного уровня, изменить некоторые стили.
Интересует возможно ли такое как на обычном компьютере в браузере, так и на мобильном телефоне, когда пользователь масштабирует страницу пальцами на тачпаде.
Ответить с цитированием
  #2 (permalink)  
Старый 30.01.2023, 23:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,059

alex_88,
https://stackoverflow.com/questions/...hange-listener
https://developer.mozilla.org/en-US/...dia/resolution
Ответить с цитированием
  #3 (permalink)  
Старый 02.02.2023, 21:06
Новичок на форуме
Отправить личное сообщение для alex_88 Посмотреть профиль Найти все сообщения от alex_88
 
Регистрация: 30.01.2023
Сообщений: 4

Спасибо за ссылки, я почитал, поразбирался.
devicePixelRatio является постоянной величиной для конкретного пользователя, соответственно это свойство мне не подходит.
Разрешение устройства и медиа запросы, как я понимаю с масштабированием не связаны.
В интернете я не нашёл ответов на свой вопрос.
Я так понимаю в JavaScript нет возможности знать изменяется ли масштаб страницы или нет (например пользователь в браузере Opera масштабирует страницу нажатием клавиш Ctrl +)
Если я ошибаюсь, объясните пожалуйста
Ответить с цитированием
  #4 (permalink)  
Старый 02.02.2023, 21:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,059

alex_88,
может я тоже ошибаюсь, но в первой ссылке: примеры, как "поймать" изменение масштаба с помощью js, а вторая ссылка: изменение стилей при масштабировании с помощью css.
Ответить с цитированием
  #5 (permalink)  
Старый 04.02.2023, 14:47
Новичок на форуме
Отправить личное сообщение для alex_88 Посмотреть профиль Найти все сообщения от alex_88
 
Регистрация: 30.01.2023
Сообщений: 4

Спасибо вам за помощь. Я протестировал пару примеров из этих ссылок.
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 отслеживать масштабирование "пальцами" в браузере на мобильном телефоне.
Ответить с цитированием
  #6 (permalink)  
Старый 15.10.2023, 23: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
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Браузер внутри сайта (аналоги iframe) holop Общие вопросы Javascript 3 10.03.2017 23:56
Как можно отправить данные с одного сайта на другой с jQuery grigori59 AJAX и COMET 5 21.12.2012 16:25
Нужна шапка сайта html/css (можно css3) Илья! Работа 2 23.07.2012 12:09
Как тестировать страницу в разных браузерах. nyols (X)HTML/CSS 32 23.06.2011 03:38
Новая система управления сайтом Scripto CMS deepslam Ваши сайты и скрипты 38 31.01.2011 14:55