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

Ответ 1

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

Изменить (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; var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth; (благодаря этому примеру или этому ответу)
• FF3.5 ТОЛЬКО: ширина экрана screen.width/media query (см. Ниже) (использует тот факт, что screen.width использует пиксели устройства, но ширина MQ использует пиксели CSS - благодаря ширине Quirksmode)
• FF3.6: неизвестный метод
• FF4+: медиа-запросы двоичного поиска (см. Ниже)
• WebKit: https://www.chromestatus.com/feature/5737866978131968 (спасибо Teo в комментариях)
• WebKit: измерьте предпочтительный размер div с -webkit-text-size-adjust:none.
• WebKit: (сломанный с r72591) document.width/jQuery(document).width() (спасибо Дирку ван Остербошу выше). Чтобы получить соотношение по пикселям устройства (вместо относительного масштабирования по умолчанию), умножьте на window.devicePixelRatio.
• Старый WebKit? (непроверено): parseInt(getComputedStyle(document.documentElement,null).width)/document.documentElement.clientWidth (из этого ответа)
• Opera: document.documentElement.offsetWidth Ширина/ширина position:fixed; width:100% position:fixed; width:100% div. отсюда (таблица ширины Quirksmode говорит, что это ошибка, а innerWidth - CSS px). Мы используем позицию: фиксированный элемент, чтобы получить ширину окна просмотра, включая пространство, в котором расположены полосы прокрутки; document.documentElement.clientWidth исключает эту ширину. Это нарушается с тех пор в 2011 году; Я не знаю, как увеличить масштаб в Opera.
• Другое: Flash-решение от Sebastian
• Ненадежный: прослушивание событий мыши и измерение изменений в screenX/change в 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>

Ответ 2

Для меня, для 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";
}

Ответ 3

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

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

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

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

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

Ответ 4

Моя коллега и я использовали script из 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);

Ответ 5

Я нашел эту статью чрезвычайно полезной. Огромное спасибо yonran. Я хотел передать дополнительное обучение, которое я нашел, применяя некоторые методы, которые он предоставил. В 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, которые были также одиночными линиями, я смог обнаружить масштабирование подавляющего большинства браузеров, поражающих наше приложение, всего несколькими строками кода.

Ответ 6

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

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

Ответ 7

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

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

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

шаги:

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

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

2. Захват 4 измерений от событий мыши:

   event.clientX, event.clientY, event.screenX, event.screenY
   

3. Измерьте расстояние d_c между двумя точками в клиентской системе

4. Измерьте расстояние d_s между двумя точками в системе экранов

5. Если d_c! = D_s, то применяется масштабирование. Разница между ними говорит о величине увеличения.

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

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

Ответ 8

В 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 масштабирование не существует, поэтому нет необходимости проверять масштабирование.

Ответ 9

Это отлично подойдет для меня в браузерах на основе 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;

Ответ 10

Что я придумал:

1) Сделайте position:fixed <div> с width:100% (id = 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.: это мой первый пост, прошу прощения за ошибки

Ответ 11

В принципе, мы имеем:

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

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

Pitch-zoom сложнее отслеживать и в настоящее время не рассматривается.

Ответ 12

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

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

Ответ 13

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

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

Ответ 14

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

min-width: 100%

то

window.document.width / elem.clientWidth

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

Ответ 15

Это для Chrome, после user800583 answer...

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

• Есть 16 'zoomLevel', а не 10
• Когда Chrome полноэкранный/максимизированный, коэффициент равен window.outerWidth/window.innerWidth, а когда это не так, отношение, как представляется, равно (window.outerWidth-16)/window.innerWidth, однако к первому случаю может быть применен второй.

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

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

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 ]
);

Ответ 16

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

});

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

Ответ 17

Этот ответ основан на комментариях о том, что 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 (%).

Ответ 18

В Chrome

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

Ответ 19

В настоящее время это работает, но все равно нужно разделить браузером. Успешно протестирован на 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()
    };
  }

Ответ 20

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

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

Ответ 21

Это может или не может помочь кому-либо, но у меня была страница, на которой я не мог правильно попасть в центр независимо от того, какие трюки 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);
    }
}

Ответ 22

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

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

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

Ответ 23

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

Ответ 24

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

Ответ 25

Это хорошо:

zoom = ( window.outerWidth - (window.outerWidth*0.1)  ) / window.innerWidth;

Ответ 26

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

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

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

Здесь скрипка: https://jsfiddle.net/ae1hdogr/

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