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

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

290 голосов
/ 11 ноября 2009

  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>

Ответы [ 25 ]

0 голосов
/ 09 июля 2014

У меня есть это решение для только для мобильных устройств (протестировано на Android): 

jQuery(function($){

zoom_level = function(){

    $("body").prepend('<div class="overlay" ' +
                'style="position:fixed; top:0%; left:0%; ' +
                'width:100%; height:100%; z-index:1;"></div>');

    var ratio = $("body .overlay:eq(0)").outerWidth() / $(window).width();
    $("body .overlay:eq(0)").remove();

    return ratio;
}

alert(zoom_level());

});

Если вам нужен уровень масштабирования сразу после сдвига, вам, вероятно, придется установить небольшой тайм-аут из-за задержки рендеринга (но я не уверен, потому что я его не тестировал).

0 голосов
/ 05 августа 2013

Обходной путь для FireFox 16+ для поиска DPPX (уровня масштабирования) исключительно с помощью JavaScript: 

var dppx = (function (precision) {
  var searchDPPX = function(level, min, divisor) {
    var wmq = window.matchMedia;
    while (level >= min && !wmq("(min-resolution: " + (level/divisor) + "dppx)").matches) {
      level--;
    }
    return level;
  };

  var maxDPPX = 5.0; // Firefox 22 has 3.0 as maximum, but testing a bit greater values does not cost much
  var minDPPX = 0.1; // Firefox 22 has 0.3 as minimum, but testing a bit smaller values does not cost anything
  var divisor = 1;
  var result;
  for (var i = 0; i < precision; i++) {
    result = 10 * searchDPPX (maxDPPX, minDPPX, divisor);
    maxDPPX = result + 9;
    minDPPX = result;
    divisor *= 10;
  }

  return result / divisor;
}) (5);
0 голосов
/ 08 декабря 2018

On Chrome 

var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");
0 голосов
/ 26 июня 2019

Работает ли он в данный момент, но все равно его нужно разделить браузером. Успешно протестирован на Chrome (75) и Safari (11.1) (пока не нашел пути для FF). Он также корректно отображает значение масштабирования на дисплее сетчатки, и вычисления запускаются при изменении размера. 

    private pixelRatio() {
      const styleString = "(min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)";
      const chromeRatio = (Math.round((this.window.outerWidth / this.window.innerWidth)*100) / 100);
      const otherRatio = (Math.round(window.devicePixelRatio * 100) / 100);
      const resizeValue = (this.isChrome()) ? chromeRatio : otherRatio;

      return resizeValue || (this.window.matchMedia && this.window.matchMedia(styleString).matches ? 2 : 1) || 1;
    }


  private isChrome():boolean {
    return (!!this.window.chrome && !(!!this.window.opera || this.window.navigator.userAgent.indexOf(' Opera') >= 0))
  }

  private chrome() {
    const zoomChrome = Math.round(((this.window.outerWidth) / this.window.innerWidth)*100) / 100;
    return {
      zoom: zoomChrome,
      devicePxPerCssPx: zoomChrome1 * this.pixelRatio()
    };
  }
0 голосов
/ 12 ноября 2009

здесь это не изменится!: 

<html>
 <head>
  <title></title>
 </head>
<body>
 <div id="xy" style="width:400px;">
  foobar
 </div>
 <div>
  <button onclick="alert(document.getElementById('xy').style.width);">Show</button>
 </div>
</body>
</html>

создать простой HTML-файл, нажмите на кнопку. независимо от того, какой уровень масштабирования: он покажет вам ширину 400 пикселей (по крайней мере, с Firefox и ie8)

Страница:
...