Как определить уровень масштабирования страницы во всех современных браузерах?

  1. Как определить уровень масштабирования страницы во всех современных браузерах? Хотя в этой теме рассказывается, как это сделать в IE7 и IE8, я не могу найти хорошего кросс-браузерного решения.

  2. Firefox сохраняет уровень масштабирования страницы для последующего доступа. Смогу ли я получить уровень масштабирования при загрузке первой страницы? Где-то я читал, что это работает, когда изменение масштаба происходит после загрузки страницы.

  3. Есть ли способ поймать 'zoom' событие?

Мне это нужно, потому что некоторые из моих расчетов основаны на пикселях и могут изменяться при увеличении.

Модифицированный образец, предоставленный @tfl

Эта страница предупреждает о различных значениях высоты при увеличении. [jsFiddle]

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"/></script>
    </head>
    <body>
        <div id="xy" style="border:1px solid #f00; width:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin tortor in lacus tincidunt volutpat. Integer dignissim imperdiet mollis. Suspendisse quis tortor velit, placerat tempor neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent bibendum auctor lorem vitae tempor. Nullam condimentum aliquam elementum. Nullam egestas gravida elementum. Maecenas mattis molestie nisl sit amet vehicula. Donec semper tristique blandit. Vestibulum adipiscing placerat mollis.</div>
        <button onclick="alert($('#xy').height());">Show</button>
    </body>
</html>
Источник

32 ответа

Этот вопрос был опубликован как давным-давно, но сегодня, когда я искал один и тот же ответ "Как обнаружить событие увеличения и уменьшения", я не смог найти один ответ, который бы подходил всем браузерам.

Как и сейчас: для Firefox/Chrome/IE8 и IE9 увеличение и уменьшение масштаба вызывает событие window.resize. Это может быть зафиксировано с помощью:

$(window).resize(function() {
//YOUR CODE.
});
Источник

Я просто проверяю, является ли window.devicePixelRatio плавающей точкой. Маловероятно, что кто-то увеличит масштаб на 200% или 300%, но именно это вы увидите на дисплеях с высоким соотношением пикселей. Как указано выше, он работает в большинстве браузеров.

      var zoomLevel = window.devicePixelRatio || 1;
  console.log("Zoom Level: " + zoomLevel);      

  
  if(Number.isInteger(zoomLevel) == false) {console.log("You zoom level is likely not  100%" }
Источник
Другие вопросы по тегам