Как определить уровень масштабирования страницы во всех современных браузерах?
Как определить уровень масштабирования страницы во всех современных браузерах? Хотя в этой теме рассказывается, как это сделать в IE7 и IE8, я не могу найти хорошего кросс-браузерного решения.
Firefox сохраняет уровень масштабирования страницы для последующего доступа. Смогу ли я получить уровень масштабирования при загрузке первой страницы? Где-то я читал, что это работает, когда изменение масштаба происходит после загрузки страницы.
Есть ли способ поймать
'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>
32 ответа
Теперь это еще больший беспорядок, чем это было, когда этот вопрос был впервые задан. Из прочтения всех ответов и постов в блоге я смог найти вот краткое изложение. Я также настроил эту страницу, чтобы протестировать все эти методы измерения уровня масштабирования.
Изменить (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 - благодаря ширине Quirksmode) - 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>
Ты можешь попробовать
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 externalWidth измеряется в пикселях экрана, а 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";
}
Мой коллега и я использовали скрипт из 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
Это все, что вам нужно.
Вы можете использовать API Visual Viewport:
window.visualViewport.scale;
Он стандартный и работает как на настольных компьютерах, так и на мобильных устройствах: поддержка браузера.
У меня есть решение для этого с января 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, то применяется масштабирование. Разница между ними говорит о величине увеличения.
Обратите внимание, что вычисления расстояний выполняются редко, например, когда вы можете получить новое событие мыши, которое далеко от предыдущего.
Ограничения: Предполагается, что пользователь будет двигать мышь хотя бы немного, а масштаб до этого времени неизвестен.
В основном мы имеем:
window.devicePixelRatioкоторая учитывает как масштабирование на уровне браузера *, так и системное масштабирование / плотность пикселей.
* - на Mac/Safari уровень масштабирования не учитывается- медиа-запросы
vw/vhCSS-единицыresizeсобытие, которое срабатывает при изменении уровня масштабирования, вызывает эффективный размер изменения окна
этого должно быть достаточно для нормального UX. Если вам нужно определить уровень масштабирования, это может быть признаком плохого дизайна пользовательского интерфейса.
Pitch-zoom сложнее отследить и в настоящее время не рассматривается.
Что я придумал, так это:
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>
PS: это мой первый пост, простите за любые ошибки
На Chrome
var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");
В 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 масштабирования не существует, поэтому нет необходимости проверять масштаб.
Попробуй это
alert(Math.round(window.devicePixelRatio * 100));
Это отлично работает для меня в браузерах на основе 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;
На мобильных устройствах (с Chrome для Android или Opera Mobile) вы можете обнаружить увеличение по window.visualViewport.scale. https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API
Определить в Safari: document.documentElement.clientWidth / window.innerWidth (возвращает 1, если на устройстве нет масштабирования).
Ваши расчеты по-прежнему основаны на количестве пикселей CSS. Теперь они просто другого размера на экране. В этом смысл полного увеличения страницы.
Что бы вы хотели, чтобы происходило в браузере на устройстве с разрешением 192 точек на дюйм, которое обычно отображало четыре пикселя устройства для каждого пикселя изображения? При увеличении 50% это устройство теперь отображает один пиксель изображения в одном пикселе устройства.
Я исправил код ниже.
HTML:
<div class="mt-5"
[ngStyle]="getStyles()">
ТС:
getStyles() {
const screenWidth = screen.width;
const windowWidth = window.innerWidth;
if (windowWidth != screenWidth) {
const percentDifference = Math.ceil((screenWidth / windowWidth) * 100);
if (percentDifference > 100) {
this.bannerBackgroundImageSize = '20%, 74%';
} else if (percentDifference === 100) {
this.bannerBackgroundImageSize = '20%, 72%';
} else if (percentDifference >= 90 && percentDifference <= 99) {
this.bannerBackgroundImageSize = '25%, 70%';
} else if (percentDifference >= 80 && percentDifference <= 89) {
this.bannerBackgroundImageSize = '28%, 68%';
} else if (percentDifference >= 75 && percentDifference <= 79) {
this.bannerBackgroundImageSize = '29%, 67%';
} else if (percentDifference >= 67 && percentDifference <= 74) {
this.bannerBackgroundImageSize = '30%, 65%';
} else if (percentDifference >= 50 && percentDifference <= 66) {
this.bannerBackgroundImageSize = '30%, 61%';
} else if (percentDifference < 50) {
this.bannerBackgroundImageSize = '30%, 58%';
}
} else {
this.bannerBackgroundImageSize = '20%, 72%';
}
const myStyles = {
'background-size': this.bannerBackgroundImageSize,
};
return myStyles;
}
Я надеюсь, что это будет работать со всеми уровнями масштабирования и его можно будет рассматривать со всеми стилями.
Не проверял это для IE, но если вы сделаете элемент elem с
min-width: 100%
затем
window.document.width / elem.clientWidth
даст вам уровень масштабирования вашего браузера (включая document.body.style.zoom фактор).
Этот ответ основан на комментариях о неправильном возвращении devicePixelRatio на ответ пользователя 1080381.
Я обнаружил, что эта команда возвращалась некорректно и в некоторых случаях при работе с рабочим столом, 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 (%).
Я использовал другой подход, я создал элемент dom с фиксированной высотой и шириной 100 пикселей, фиксированной позицией и непрозрачностью 0, в основном скрытый элемент.
Затем я использовал dom-to-image для захвата этого элемента в виде изображения, что может звучать как излишество, но я хотел пуленепробиваемое решение, и мы все равно уже использовали этот пакет, а затем проверил ширину выходного изображения, если оно возвращалось со значением 110, зум составляет 110%, это очень точно.
const ORIGINAL_ZOOM_SIZE = 100;
async function isValidateZoomLevel() {
const base64Render = await domToImage({
ref: hiddenElementReference,
});
const pixleRatio = Math.round(window.devicePixelRatio);
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(ORIGINAL_ZOOM_SIZE === img.width / pixleRatio && ORIGINAL_ZOOM_SIZE === (img.height / pixleRatio));
img.onerror = reject;
img.src = base64Render;
});
}
Это для Chrome, в ответ на user800583 ответ...
Я потратил несколько часов на эту проблему и не нашел лучшего подхода, но:
- Есть 16 'zoomLevel', а не 10
- Когда Chrome является полноэкранным / развернутым, соотношение
window.outerWidth/window.innerWidthи когда это не так, соотношение кажется(window.outerWidth-16)/window.innerWidthОднако к 1-му случаю можно приблизиться ко 2-му.
Итак, я пришел к следующему...
Но у этого подхода есть ограничения: например, если вы играете на аккордеоне с окном приложения (быстро увеличиваете и уменьшаете ширину окна), вы получите промежутки между уровнями масштабирования, хотя масштаб не изменился (может быть externalWidth и 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 ]
);
У меня есть это решение только для мобильных устройств (протестировано с 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());
});
Если вам нужен уровень масштабирования сразу после сдвига, вам, вероятно, придется установить небольшой тайм-аут из-за задержки рендеринга (но я не уверен, потому что я не тестировал его).
Он в настоящее время работает, но все же необходимо разделить браузером. Успешно протестирован в 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()
};
}
Это может кому-то помочь, а может и не помочь, но у меня была страница, которую я не мог правильно расположить по центру, независимо от того, какие уловки Css я попробовал, поэтому я написал файл вызова страницы JQuery Center Center:
Возникла проблема с уровнем масштабирования в браузере, при котором страница будет сдвигаться в зависимости от 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);
}
}
Проблема заключается в типах используемых мониторов: монитор 4К или стандартный монитор. Chrome, безусловно, самый умный в том, чтобы сказать нам, что уровень масштабирования просто с помощью window.devicePixelRatioпо-видимому, он может сказать, какова плотность пикселей, и сообщит одно и то же число, независимо от того, что.
Других браузеров не так уж и много. IE и Edge, вероятно, наихудшие, поскольку они по-разному обрабатывают уровни масштабирования Чтобы получить такой же размер текста на мониторе 4k, вы должны выбрать 200% вместо 100% на стандартном мониторе.
По состоянию на май 2018 года, вот что мне нужно, чтобы определить уровни масштабирования для некоторых из самых популярных браузеров, Chrome, Firefox и IE11. У меня есть это сказать мне, что процент увеличения. Для IE он сообщает 100% даже для 4k мониторов, которые на самом деле на 200%, но размер текста действительно одинаков.
Вот скрипка: https://jsfiddle.net/ae1hdogr/
Если кому-то захочется попробовать другие браузеры и обновить скрипку, сделайте это. Моей главной целью было накрыть эти 3 браузера, чтобы определить, используют ли люди коэффициент масштабирования более 100% для использования моего веб-приложения, и отобразить уведомление, предлагающее меньший коэффициент увеличения.
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;
};
Обходной путь для 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);
Здесь это не меняется!
<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)
@media (min-width: 500px){
/* css here */
}
или
@media (max-width: 500px){
/* css here */
}
Это определяет масштаб.
html-код:
<body id="blog">
js:
function scale(){
return Math.round(100/(d.getElementById('blog').offsetWidth/d.getElementById('blog').getBoundingClientRect().width))/100;
}
Коэффициент масштабирования и масштаб не следует путать друг с другом. Пользователи управляют «масштабированием»; «масштаб» — это преобразование CSS. Однако 11 лет и 10 месяцев назад user189618 заметил:
В основном я хочу знать размер DIV при 100% увеличении.
Это делает это. Я использую его в сочетании с запросами @media для определения масштабирования устройств JavaScript, т.е. 360x720 может применить масштабирование 0,5; 720x360, 0,75.
var d=document;