Теперь это еще больший беспорядок, чем это было, когда этот вопрос был впервые задан. Прочитав все ответы и сообщения в блоге, которые я смог найти, вот краткое изложение. Я также настроил эту страницу, чтобы протестировать все эти методы измерения уровня увеличения .
Редактировать (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 использует пиксели CSS - благодаря Ширина причуда )
- FF3,6 : неизвестный метод
- FF4 + : бинарный поиск в медиа-запросах (см. Ниже)
- WebKit : https://www.chromestatus.com/feature/5737866978131968 (спасибо Тео в комментариях)
- 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% дел. отсюда ( Таблица ширины Quirksmode говорит, что это ошибка; innerWidth должен быть CSS px). Мы используем элемент position: fixed, чтобы получить ширину области просмотра , включая пространство, где полосы прокрутки ; document.documentElement.clientWidth исключает эту ширину. Это сломано с 2011 года; Я больше не знаю, как получить уровень масштабирования в Opera.
- Другое : Flash-решение от Себастьяна
- Ненадежно: слушать события мыши и измерять изменения в 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>