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

  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>
268
browser detection javascript zoom

23 ответов

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

редактировать (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 / media query ширина экрана (см. ниже) (использует тот факт, что screen.width использует пиксели устройства, но ширина MQ использует пиксели CSS-благодаря ширина Quirksmode)
  • ФФ3.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 (от ответ)
  • Опера: document.documentElement.offsetWidth / ширина position:fixed; width:100% div. отсюда (англ. таблице говорит, что это ошибка; innerWidth должен быть CSS px). Мы используем элемент position: fixed для получения ширины окна просмотра в том числе места, где полосы прокрутки; документ.функцию documentelement.clientWidth исключает эту ширину. Это сломано где-то в 2011 году; я не знаю, как получить уровень масштабирования в Opera больше.
  • другое: Флэш-решение от Себастьяна
  • ненадежно: слушайте события мыши и измеряйте изменения в screenX / change in 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>
257

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

используя window.innerWidth и window.outerWidth работали. По какой-то причине в Chrome outerWidth измеряется в пикселях экрана, а innerWidth-в пикселях 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";
}
43

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

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

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

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

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

мой коллега и я использовали сценарий из 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);
15

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

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

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

10

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

3

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

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

принцип заключается в следующем. Соберите 2 MouseEvent точки, которые находятся далеко друг от друга. Каждое событие мыши поставляется с координатами экрана и документа. Измерить расстояние между 2 точками в обеих системах координат. Хотя есть переменные фиксированные смещения между системами координат из-за мебели браузера,расстояние между точками должно быть идентично, если страница не увеличена. Причина указания "далеко друг от друга" (я ставлю это как 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 между 2 точками в клиентской системе

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

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

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

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

3

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

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. : Это мой первый пост, простите любые ошибки

2

On мобильный устройства (с Chrome для Android или Opera Mobile) вы можете обнаружить увеличение по

2

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

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

1

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

min-width: 100%

затем 

window.document.width / elem.clientWidth

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

0

это Chrome, в результате user800583 ответ ...

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

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

Так Что Я пришел к следующему ...

но этот подход имеет ограничения: например, если вы играете на аккордеоне с окном приложения (быстро увеличиваете и уменьшаете ширину окна), то вы получите промежутки между уровнями масштабирования, хотя масштаб не изменился (может быть outerWidth и 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 ]
);
0

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

в основном, у нас есть:

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

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

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

0

этот ответ основан на комментариях о 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% zoom:

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

умножение на 100 в исходном ответе user1080381 даст вам масштаб 100 (%).

0

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

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

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

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

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

0

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

<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-файл, нажмите на кнопку. независимо от того, какой уровень масштабирования: он покажет вам ширину 400px (по крайней мере, с firefox и ie8)

-1

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

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

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

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

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