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

https://stackoverflow.com/questions/1713771

19-09-2019
|

Вопрос

Как я могу определить уровень масштабирования страницы во всех современных браузерах?В то время как этот Нитки рассказывает, как это сделать в IE7 и IE8, я не могу найти хорошее кроссбраузерное решение.
Firefox сохраняет уровень масштабирования страницы для последующего доступа.Смогу ли я получить уровень масштабирования при первой загрузке страницы?Где-то я читал, что это работает, когда происходит изменение масштаба после страница загружена.
Есть ли способ заманить в ловушку 'zoom' событие?

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

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

Эта страница предупреждает о различных значениях высоты при увеличении. [jsFiddle] [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>

Решение

Сейчас это еще большая неразбериха, чем была, когда этот вопрос был задан впервые.Прочитав все ответы и записи в блоге, которые я смог найти, вот краткое изложение.Я также настроил эта страница предназначена для тестирования всех этих методов измерения уровня масштабирования.

Редактировать (2011-12-12):Я добавил проект, который можно клонировать: https://github.com/tombigel/detect-zoom

IE8: screen.deviceXDPI / screen.logicalXDPI (или для уровня масштабирования относительно масштабирования по умолчанию, screen.systemXDPI / screen.logicalXDPI)
IE7: var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth; (благодаря этот пример или этот ответ)
ТОЛЬКО FF3.5: screen.width / ширина экрана медиа-запроса (см. Ниже) (использует тот факт, что screen.width использует пиксели устройства, но MQ width использует пиксели CSS - благодаря Ширина режима причудливости)
ФF3.6:нет известного метода
ФF4+:бинарный поиск по медиа-запросам (см. Ниже)
Веб - набор: https://www.chromestatus.com/feature/5737866978131968 (спасибо Тео в комментариях)
Веб - набор:измерьте предпочтительный размер div с помощью -webkit-text-size-adjust:none.
Веб - набор:(сломан с тех пор, как r72591) document.width / jQuery(document).width() (благодаря Дирк ван Остербош выше).Чтобы получить соотношение в пикселях устройства (а не относительно масштабирования по умолчанию), умножьте на window.devicePixelRatio.
Старый WebKit? (непроверено): parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth (из этот ответ)
Опера: document.documentElement.offsetWidth / ширина a position:fixed; width:100% див. отсюда (Таблица ширины Quirksmode говорит, что это ошибка;Внутренняя ширина должна быть CSS px).Мы используем элемент position:fixed, чтобы получить ширину окна просмотра включая пространство, где находятся полосы прокрутки;document.documentElement.clientWidth исключает эту ширину.Это было нарушено где-то в 2011 году;Я больше не знаю способа получить уровень масштабирования в Opera.
Другое: Флэш-решение от Себастьяна
Ненадежный:прослушивание событий мыши и измерение изменений в ScreenX / изменении в clientX

Вот бинарный поиск для Firefox 4, поскольку я не знаю ни о какой переменной, в которой он отображается:

<style id=binarysearch></style>
<div id=dummyElement>Dummy element to test media queries.</div>
<script>
var mediaQueryMatches = function(property, r) {
  var style = document.getElementById('binarysearch');
  var dummyElement = document.getElementById('dummyElement');
  style.sheet.insertRule('@media (' + property + ':' + r +
                         ') {#dummyElement ' +
                         '{text-decoration: underline} }', 0);
  var matched = getComputedStyle(dummyElement, null).textDecoration
      == 'underline';
  style.sheet.deleteRule(0);
  return matched;
};
var mediaQueryBinarySearch = function(
    property, unit, a, b, maxIter, epsilon) {
  var mid = (a + b)/2;
  if (maxIter == 0 || b - a < epsilon) return mid;
  if (mediaQueryMatches(property, mid + unit)) {
    return mediaQueryBinarySearch(
        property, unit, mid, b, maxIter-1, epsilon);
  } else {
    return mediaQueryBinarySearch(
        property, unit, a, mid, maxIter-1, epsilon);
  }
};
var mozDevicePixelRatio = mediaQueryBinarySearch(
    'min--moz-device-pixel-ratio', '', a, b, maxIter, epsilon);
var ff35DevicePixelRatio = screen.width / mediaQueryBinarySearch(
    'min-device-width', 'px', 0, 6000, 25, .0001);
</script>

Другие советы

Вы можете попробовать

var browserZoomLevel = Math.round(window.devicePixelRatio * 100);

Это даст вам процентный уровень масштабирования браузера.

Чтобы перехватить событие масштабирования, вы можете использовать

$(window).resize(function() { 
// your code 
});

Для меня, для Chrome / Webkit, document.width / jQuery(document).width() не сработало.Когда я уменьшил свое окно и увеличил масштаб своего сайта так, что появились горизонтальные полосы прокрутки, document.width / jQuery(document).width() не равнялся 1 при масштабировании по умолчанию.Это происходит потому, что document.width включает часть документа за пределами области просмотра.

Используя window.innerWidth и window.outerWidth сработало.По какой-то причине в Chrome внешняя ширина измеряется в пикселях экрана, а внутренняя ширина измеряется в пикселях css.

var screenCssPixelRatio = (window.outerWidth - 8) / window.innerWidth;
if (screenCssPixelRatio >= .46 && screenCssPixelRatio <= .54) {
  zoomLevel = "-4";
} else if (screenCssPixelRatio <= .64) {
  zoomLevel = "-3";
} else if (screenCssPixelRatio <= .76) {
  zoomLevel = "-2";
} else if (screenCssPixelRatio <= .92) {
  zoomLevel = "-1";
} else if (screenCssPixelRatio <= 1.10) {
  zoomLevel = "0";
} else if (screenCssPixelRatio <= 1.32) {
  zoomLevel = "1";
} else if (screenCssPixelRatio <= 1.58) {
  zoomLevel = "2";
} else if (screenCssPixelRatio <= 1.90) {
  zoomLevel = "3";
} else if (screenCssPixelRatio <= 2.28) {
  zoomLevel = "4";
} else if (screenCssPixelRatio <= 2.70) {
  zoomLevel = "5";
} else {
  zoomLevel = "unknown";
}

Мой коллега и я использовали сценарий из https://github.com/tombigel/detect-zoom.Кроме того, мы также динамически создали svg-элемент и проверяем его свойство currentScale.Это отлично работает в Chrome и, вероятно, в большинстве браузеров тоже.Однако в FF функция "масштабировать только текст" должна быть отключена.SVG - это поддерживаемый в большинстве браузеров.На момент написания этой статьи тестировался на IE10, FF19 и Chrome28.

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('version', '1.1');
document.body.appendChild(svg);
var z = svg.currentScale;
... more code ...
document.body.removeChild(svg);

Я нашел эту статью чрезвычайно полезной.Огромное спасибо йонрану.Я хотел передать некоторые дополнительные знания, которые я получил при внедрении некоторых методов, которые он предоставил.В FF6 и Chrome 9 была добавлена поддержка медиа-запросов из JS, что может значительно упростить подход к медиа-запросам, необходимый для определения масштабирования в FF.Смотрите документы на сайте MDN здесь.Для моих целей мне нужно было только определить, был ли браузер увеличен или уменьшен, мне не нужен был фактический коэффициент масштабирования.Я смог получить свой ответ с помощью одной строки JavaScript:

var isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;

Объединив это с решениями IE8 + и Webkit, которые также были однострочными, я смог обнаружить масштабирование в подавляющем большинстве браузеров, использующих наше приложение всего несколькими строками кода.

zoom = ( window.outerWidth - 10 ) / window.innerWidth

Это все, что вам нужно.

У меня есть решение для этого по состоянию на январь 2016 года.Протестировано в браузерах Chrome, Firefox и MS Edge.

Принцип заключается в следующем.Соберите 2 точки MouseEvent, которые находятся далеко друг от друга.Каждое событие мыши сопровождается координатами экрана и документа.Измерьте расстояние между двумя точками в обеих системах координат.Хотя существуют переменные фиксированные смещения между системами координат из-за особенностей браузера, расстояние промежутки между точками должны быть одинаковыми, если страница не увеличена.Причина указания "далеко друг от друга" (я обозначаю это как 12 пикселей) заключается в том, что небольшие изменения масштаба (например90% или 110%) поддаются обнаружению.

Ссылка:https://developer.mozilla.org/en/docs/Web/Events/mousemove

Шаги:

Добавить прослушиватель перемещения мыши

window.addEventListener("mousemove", function(event) {
    // handle event
});

Захватите 4 измерения из событий мыши:
```
event.clientX, event.clientY, event.screenX, event.screenY
```
Измерьте расстояние d_c между двумя точками в клиентской системе
Измерьте расстояние d_s между двумя точками в экранной системе
Если d_c != d_s, то применяется масштабирование.Разница между ними говорит вам о величине масштабирования.

Н.Б.Вычисления расстояния выполняйте только редко, напримеркогда вы можете попробовать новое событие мыши, которое далеко от предыдущего.

Ограничения:Предполагается, что пользователь хотя бы немного переместит мышь, а масштабирование до этого времени невозможно.

В Internet Explorer 7, 8 и 9 это работает:

function getZoom() {
    var screen;

    screen = document.frames.screen;
    return ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.9).toFixed();
}

"+0.9" добавлено для предотвращения ошибок округления (в противном случае вы получили бы 104% и 109%, если масштаб браузера установлен на 105% и 110% соответственно).

В IE6 масштабирование не существует, поэтому проверять масштаб нет необходимости.

То, что я придумал, это :

1) Сделайте position:fixed <div> с width:100% (идентификатор=zoomdiv)

2) когда страница загружается :

zoomlevel=$("#zoomdiv").width()*1.0 / screen.availWidth

И это сработало для меня в течение ctrl+ и ctrl- увеличивает масштаб.

или я могу добавить строку в $(window).onresize() событие для получения активного уровня масштабирования

Код:

<script>
    var zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;

    $(window).resize(function(){
        zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;
        alert(zoom);    
    });
</script>
<body>
    <div id=zoomdiv style="width:100%;position:fixed;"></div>
</body>

P.S.:это мой первый пост, прошу прощения за любые ошибки

Это отлично сработало для меня в браузерах на основе webkit (Chrome, Safari).:

function isZoomed() {
    var width, mediaQuery;

    width = document.body.clientWidth;
    mediaQuery = '(max-width: ' + width + 'px) and (min-width: ' + width + 'px)';

    return !window.matchMedia(mediaQuery).matches;
}

Однако, похоже, это не работает в Firefox.

Это также работает в WebKit:

var zoomLevel = document.width / document.body.clientWidth;

В принципе, у нас есть:

window.devicePixelRatio который учитывает как масштабирование на уровне браузера *, так и системное масштабирование / плотность пикселей.
* — на Mac / Safari уровень масштабирования не учитывается
медиа - запросы
vw/vh Единицы CSS
resize событие, которое срабатывает при изменении уровня масштабирования, приводит к изменению эффективного размера окна

этого должно быть достаточно для Нормальный Поток.Если вам нужно определить уровень масштабирования, это может быть признаком плохого дизайна пользовательского интерфейса.

Изменение высоты тона отследить сложнее, и в настоящее время оно не учитывается.

На Мобильный устройств (с Chrome для Android или Opera Mobile), вы можете определять масштаб с помощью окно.visualViewport.масштабирование. https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API

Обнаружение в Safari: document.documentElement.clientWidth / окно.Внутренняя ширина (верните 1, если масштабирование на устройстве отсутствует).

Ваши вычисления по-прежнему основаны на нескольких CSS-пикселях.Просто теперь они другого размера на экране.В этом смысл масштабирования всей страницы.

Что бы вы хотели, чтобы происходило в браузере на устройстве с разрешением 192 dpi, которое поэтому обычно отображает четыре пикселя устройства на каждый пиксель изображения?При 50%-ном увеличении это устройство теперь отображает один пиксель изображения в одном пикселе устройства.

В Chrome

var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");

Не тестировал это для IE, но если вы создадите элемент elem с

min-width: 100%

тогда

window.document.width / elem.clientWidth

даст вам уровень масштабирования вашего браузера (включая document.body.style.zoom фактор).

Это для Хром, вслед за пользователь800583 ответ ...

Я потратил несколько часов на эту проблему и не нашел лучшего подхода, но :

Существует 16 "уровней масштабирования", а не 10
Когда Chrome работает в полноэкранном режиме / максимально развернуто, соотношение равно window.outerWidth/window.innerWidth, а когда это не так, соотношение, по-видимому, равно (window.outerWidth-16)/window.innerWidth, однако к 1-му случаю можно подойти со стороны 2-го.

Итак , я пришел к следующему ...

Но этот подход имеет ограничения :например, если вы играете на аккордеоне в окне приложения (быстро увеличиваете и уменьшаете ширину окна), то вы получите промежутки между уровнями масштабирования, хотя масштаб не изменился (возможно, внешняя и внутренняя ширина обновляются не совсем одновременно).

var snap = function (r, snaps)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return i; }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
);

И если вы хотите, чтобы фактор :

var snap = function (r, snaps, ratios)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return eval(ratios[i]); }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
            [ 0.25, '1/3', 0.5, '2/3', 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5 ]
);

У меня есть это решение для только для мобильных устройств (протестировано с 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());

});

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

Этот ответ основан на комментариях о неправильном возврате devicePixelRatio к ответу user1080381.

Я обнаружил, что эта команда также возвращалась некорректно в некоторых случаях при работе с настольными компьютерами Surface Pro 3 и Surface Pro 4.

Что я обнаружил, так это то, что это работало на моем рабочем столе, но SP3 и SP4 выдавали разные номера друг от друга и от рабочего стола.

Однако я заметил, что SP3 возвращается в полтора раза большим масштабом, чем я ожидал.Когда я взглянул на настройки дисплея, SP3 был фактически установлен на 150% вместо 100%, которые были у меня на рабочем столе.

Итак, решение для комментариев должно заключаться в том, чтобы разделить возвращаемый уровень масштабирования на масштаб машины, на которой вы в данный момент находитесь.

Я смог получить масштаб в настройках Windows, выполнив следующее:

ManagementObjectSearcher searcher = new ManagementObjectSearcher("SELECT * FROM Win32_DesktopMonitor");
double deviceScale = Convert.ToDouble(searcher.Get().OfType<ManagementObject>().FirstOrDefault()["PixelsPerXLogicalInch"]);
int standardPixelPerInch = 96;
return deviceScale / standardPixelPerInch;

Итак, в случае моего SP3, вот как этот код выглядит при 100% увеличении:

devicePixelRatio = 1.5
deviceScale = 144
deviceScale / standardPixelPerInch = 1.5
devicePixelRatio / (deviceScale / standardPixelPerInch) = 1

Умножение на 100 в исходном ответе user1080381 даст вам увеличение на 100 (%).

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

    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()
    };
  }

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

<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).

Это может кому-то помочь, а может и нет, но у меня была страница, которую я не мог правильно отцентрировать, какие бы трюки с Css я ни пробовал, поэтому я написал страницу центра обработки вызовов файла jQuery:

Проблема возникла с уровнем масштабирования браузера, страница сдвигалась в зависимости от того, были ли вы на 100%, 125%, 150% и т.д.

Приведенный ниже код находится в файле jQuery с именем centerpage.js .

Со своей страницы мне пришлось сослаться на jQuery и этот файл, чтобы заставить его работать, хотя на моей главной странице уже была ссылка на jQuery.

<title>Home Page.</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/centerpage.js"></script>

centerpage.js:

// centering page element
function centerPage() {
    // get body element
    var body = document.body;

    // if the body element exists
    if (body != null) {
        // get the clientWidth
        var clientWidth = body.clientWidth;

        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var left = (windowWidth - bodyWidth) / 2;

        // this is a hack, but it works for me a better method is to determine the 
        // scale but for now it works for my needs
        if (left > 84) {
            // the zoom level is most likely around 150 or higher
            $('#MainBody').removeClass('body').addClass('body150');
        } else if (left < 100) {
            // the zoom level is most likely around 110 - 140
            $('#MainBody').removeClass('body').addClass('body125');
        }
    }
}


// CONTROLLING EVENTS IN jQuery
$(document).ready(function() {
    // center the page
    centerPage();
});

Также, если вы хотите расположить панель по центру:

// centering panel
function centerPanel($panelControl) {
    // if the panel control exists
    if ($panelControl && $panelControl.length) {
        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var panelHeight = $panelControl.height();
        var panelWidth = $panelControl.width();

        // centering
        $panelControl.css({
            'position': 'absolute',
            'top': (windowHeight - panelHeight) / 2,
            'left': (windowWidth - panelWidth) / 2
        });

        // only need force for IE6
        $('#backgroundPanel').css('height', windowHeight);
    }
}

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

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

$(window).resize(function() {
//YOUR CODE.
});

Обходной путь для 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);

function supportFullCss3()
{
    var div = document.createElement("div");
    div.style.display = 'flex';
    var s1 = div.style.display == 'flex';
    var s2 = 'perspective' in div.style;

    return (s1 && s2);
};

function getZoomLevel()
{
    var screenPixelRatio = 0, zoomLevel = 0;

    if(window.devicePixelRatio && supportFullCss3())
        screenPixelRatio = window.devicePixelRatio;
    else if(window.screenX == '0')
        screenPixelRatio = (window.outerWidth - 8) / window.innerWidth;
    else
    {
        var scr = window.frames.screen;
        screenPixelRatio = scr.deviceXDPI / scr.systemXDPI;
    }

    //---------------------------------------
    if (screenPixelRatio <= .11){ //screenPixelRatio >= .01 &&
      zoomLevel = "-7";
    } else if (screenPixelRatio <= .25) {
      zoomLevel = "-6";
    }else if (screenPixelRatio <= .33) {
      zoomLevel = "-5.5";
    } else if (screenPixelRatio <= .40) {
      zoomLevel = "-5";
    } else if (screenPixelRatio <= .50) {
      zoomLevel = "-4";
    } else if (screenPixelRatio <= .67) {
      zoomLevel = "-3";
    } else if (screenPixelRatio <= .75) {
      zoomLevel = "-2";
    } else if (screenPixelRatio <= .85) {
      zoomLevel = "-1.5";
    } else if (screenPixelRatio <= .98) {
      zoomLevel = "-1";
    } else if (screenPixelRatio <= 1.03) {
      zoomLevel = "0";
    } else if (screenPixelRatio <= 1.12) {
      zoomLevel = "1";
    } else if (screenPixelRatio <= 1.2) {
      zoomLevel = "1.5";
    } else if (screenPixelRatio <= 1.3) {
      zoomLevel = "2";
    } else if (screenPixelRatio <= 1.4) {
      zoomLevel = "2.5";
    } else if (screenPixelRatio <= 1.5) {
      zoomLevel = "3";
    } else if (screenPixelRatio <= 1.6) {
      zoomLevel = "3.3";
    } else if (screenPixelRatio <= 1.7) {
      zoomLevel = "3.7";
    } else if (screenPixelRatio <= 1.8) {
      zoomLevel = "4";
    } else if (screenPixelRatio <= 1.9) {
      zoomLevel = "4.5";
    } else if (screenPixelRatio <= 2) {
      zoomLevel = "5";
    } else if (screenPixelRatio <= 2.1) {
      zoomLevel = "5.2";
    } else if (screenPixelRatio <= 2.2) {
      zoomLevel = "5.4";
    } else if (screenPixelRatio <= 2.3) {
      zoomLevel = "5.6";
    } else if (screenPixelRatio <= 2.4) {
      zoomLevel = "5.8";
    } else if (screenPixelRatio <= 2.5) {
      zoomLevel = "6";
    } else if (screenPixelRatio <= 2.6) {
      zoomLevel = "6.2";
    } else if (screenPixelRatio <= 2.7) {
      zoomLevel = "6.4";
    } else if (screenPixelRatio <= 2.8) {
      zoomLevel = "6.6";
    } else if (screenPixelRatio <= 2.9) {
      zoomLevel = "6.8";
    } else if (screenPixelRatio <= 3) {
      zoomLevel = "7";
    } else if (screenPixelRatio <= 3.1) {
      zoomLevel = "7.1";
    } else if (screenPixelRatio <= 3.2) {
      zoomLevel = "7.2";
    } else if (screenPixelRatio <= 3.3) {
      zoomLevel = "7.3";
    } else if (screenPixelRatio <= 3.4) {
      zoomLevel = "7.4";
    } else if (screenPixelRatio <= 3.5) {
      zoomLevel = "7.5";
    } else if (screenPixelRatio <= 3.6) {
      zoomLevel = "7.6";
    } else if (screenPixelRatio <= 3.7) {
      zoomLevel = "7.7";
    } else if (screenPixelRatio <= 3.8) {
      zoomLevel = "7.8";
    } else if (screenPixelRatio <= 3.9) {
      zoomLevel = "7.9";
    } else if (screenPixelRatio <= 4) {
      zoomLevel = "8";
    } else if (screenPixelRatio <= 4.1) {
      zoomLevel = "8.1";
    } else if (screenPixelRatio <= 4.2) {
      zoomLevel = "8.2";
    } else if (screenPixelRatio <= 4.3) {
      zoomLevel = "8.3";
    } else if (screenPixelRatio <= 4.4) {
      zoomLevel = "8.4";
    } else if (screenPixelRatio <= 4.5) {
      zoomLevel = "8.5";
    } else if (screenPixelRatio <= 4.6) {
      zoomLevel = "8.6";
    } else if (screenPixelRatio <= 4.7) {
      zoomLevel = "8.7";
    } else if (screenPixelRatio <= 4.8) {
      zoomLevel = "8.8";
    } else if (screenPixelRatio <= 4.9) {
      zoomLevel = "8.9";
    } else if (screenPixelRatio <= 5) {
      zoomLevel = "9";
    }else {
      zoomLevel = "unknown";
    }

    return zoomLevel;
};

Проблема заключается в типах используемых мониторов: 4k-монитор по сравнению со стандартным монитором.Chrome, безусловно, самый умный в том, что может сообщить нам, каков уровень масштабирования, просто используя window.devicePixelRatio, по-видимому, он может определить, какова плотность пикселей, и сообщает то же самое число независимо от того, что.

Других браузеров не так много.IE и Edge, вероятно, самые худшие, поскольку они обрабатывают уровни масштабирования совершенно по-разному.Чтобы получить текст того же размера на мониторе 4k, вы должны выбрать 200% вместо 100% на стандартном мониторе.

По состоянию на май 2018 года, вот что у меня есть для определения уровней масштабирования для нескольких самых популярных браузеров - Chrome, Firefox и IE11.У меня есть, чтобы он подсказал мне, каков процент масштабирования.Для IE он сообщает о 100% даже для мониторов 4k, которые на самом деле находятся на уровне 200%, но размер текста действительно тот же.

Вот скрипка: https://jsfiddle.net/ae1hdogr/

Если кто-нибудь захочет попробовать другие браузеры и обновить скрипку, пожалуйста, сделайте это.Моей главной целью было охватить эти 3 браузера, чтобы определить, использовали ли люди коэффициент масштабирования, превышающий 100%, для использования моего веб-приложения, и отобразить уведомление, предлагающее коэффициент масштабирования арендодателя.

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow