최신 브라우저에서 페이지 확대/축소 수준을 감지하려면 어떻게 해야 합니까?
모든 최신 브라우저에서 페이지 확대/축소 수준을 감지하려면 어떻게 해야 합니까?이 스레드는 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>
이제 이 질문이 처음 제기되었을 때보다 훨씬 더 큰 혼란입니다.제가 찾을 수 있는 모든 반응과 블로그 게시물을 읽어본 결과, 여기 요약이 있습니다.또, 줌 레벨의 측정 방법을 모두 테스트하기 위해서, 이 페이지를 설정했습니다.
편집(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 픽셀을 사용합니다.Quicksmode 폭 덕분에) - 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()(위의 Dirk van Oosterbosch 덕분입니다).장치 픽셀의 비율을 얻으려면(기본 확대/축소를 기준으로 하지 않고) 곱하기window.devicePixelRatio. - 오래된 WebKit?(미검증):
parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth(이 답변에서) - 오페라:
document.documentElement.offsetWidth의 폭 / a의 폭position:fixed; width:100%div. from here (Quirksmode의 widths 테이블에는 버그가 표시되어 있습니다.innerWidth는 CSS px여야 합니다).position:fixed 요소를 사용하여 스크롤바가 있는 공간을 포함한 뷰포트의 너비를 가져옵니다.document.documentElement.clientWidth는 이 너비를 제외합니다.이것은 2011년 이후로 고장났습니다.오페라의 줌 레벨을 취득할 수 있는 방법을 더 이상 알 수 없습니다. - 기타: Sebastian의 플래시 솔루션
- 신뢰할 수 없음: 마우스 이벤트를 듣고 화면 변화량을 측정 X/클라이언트 변화량
Firefox 4에 대한 바이너리 검색은 다음과 같습니다.왜냐하면 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);
이것에 의해, 레티나 이외의 디스플레이로 브라우저의 줌 비율 레벨을 얻을 수 있습니다.높은 DPI/망막 디스플레이의 경우 다른 값(예: Chrome 및 Safari의 경우 200, Firefox의 경우 140)을 산출합니다.
사용할 수 있는 확대/축소 이벤트를 포착하려면
$(window).resize(function() {
// your code
});
Chrome【Chrome/Webkit】★★★★★★★★★★★★★★★★★★★★★★★★★★★★.document.width / jQuery(document).width()동작하지 않았다.창을 작게 만들고 수평 스크롤바가 나타나도록 내 사이트를 확대하면document.width / jQuery(document).width()1을 하다그 이유는document.width에는 뷰포트 외부에 있는 문서의 일부가 포함되어 있습니다.
「」를 사용합니다.window.innerWidth ★★★★★★★★★★★★★★★★★」window.outerWidth어떤 로, 픽셀 됩니다."Chrome" "outerWidth" "innerWidth" css "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);
나는 이 기사가 매우 도움이 된다는 것을 알았다.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 솔루션과 조합해 보면, 대부분의 브라우저가 코드 몇 줄만으로 앱에 액세스 하고 있는 것을 확인할 수 있었습니다.
zoom = ( window.outerWidth - 10 ) / window.innerWidth
그것만 있으면 돼
Visual Viewport API를 사용할 수 있습니다.
window.visualViewport.scale;
표준 사양으로 데스크톱과 모바일 모두에서 사용할 수 있습니다.브라우저 지원입니다.
저는 2016년 1월 현재 이에 대한 해결책을 가지고 있습니다.Chrome, Firefox 및 MS Edge 브라우저에서 동작 테스트 완료.
원칙은 다음과 같습니다.멀리 떨어져 있는 2개의 마우스 이벤트 포인트를 수집합니다.각 마우스 이벤트에는 화면 및 문서 좌표가 포함되어 있습니다.두 좌표계에서 두 점 사이의 거리를 측정합니다.브라우저 가구로 인해 좌표계 사이에 가변 고정 간격띄우기가 있지만 페이지가 확대/축소되지 않으면 점 사이의 거리가 같아야 합니다.「멀리 떨어져 있다」(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인 경우 줌이 적용됩니다.둘 사이의 차이는 줌의 양을 나타냅니다.
주의: 거리 계산은 거의 수행하지 않습니다. 예를 들어 이전 이벤트와 다른 새 마우스 이벤트를 샘플링할 수 있습니다.
제한 사항:사용자가 마우스를 조금이라도 움직인다고 가정하고, 이때까지 줌을 알 수 없습니다.
제가 생각해낸 건
작성한다 1) ★position:fixed <div>width:100%(id=sublicdiv)
2) 페이지가 로드될 때:
zoomlevel=$("#zoomdiv").width()*1.0 / screen.availWidth
그것은 .ctrl+ ★★★★★★★★★★★★★★★★★」ctrl-줌스/줌즈
이 에다가 쓸 수도 요.$(window).onresize() to zoom level ( 줌 을 취득하는 이벤트)
코드:
<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>
추신: 첫 번째 투고입니다.실수는 용서해 주세요.
기본적으로 다음과 같은 것이 있습니다.
window.devicePixelRatio브라우저 수준의 줌*과 시스템 줌/축소 밀도를 모두 고려합니다.
: 되지 않습니다* : Mac/Safari 줌레벨은 고려되지 않습니다.- 미디어 쿼리
vw/vhCSS 닛 cresize변경 시합니다.
이 정도면 일반 UX에 충분할 겁니다.확대/축소 레벨을 검출할 필요가 있는 경우는, UI 설계가 잘못되어 있을 가능성이 있습니다.
피치 줌은 추적하기 어렵고 현재 고려되지 않습니다.
Internet Explorer 7, 8, 9 에서는, 다음과 같이 동작합니다.
function getZoom() {
var screen;
screen = document.frames.screen;
return ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.9).toFixed();
}
반올림 오류를 방지하기 위해 "+0.9"가 추가됩니다(그렇지 않으면 브라우저 줌이 각각 105%와 110%로 설정되었을 때 104%와 109%가 표시됩니다).
IE6에서는 줌이 없기 때문에 줌을 확인할 필요가 없습니다.
웹킷 기반 브라우저(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;
}
파이어폭스에서는 동작하지 않는 것 같습니다.
이것은 WebKit에서도 동작합니다.
var zoomLevel = document.width / document.body.clientWidth;
Chrome의 경우
var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");
이거 먹어봐
alert(Math.round(window.devicePixelRatio * 100));
모바일 장치(Android용 Chrome 또는 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 픽셀에 근거하고 있습니다.이제 화면에 보이는 크기가 다를 뿐입니다.그게 풀 페이지 줌의 포인트입니다.
192dpi 디바이스의 브라우저에서는 보통 이미지 내의 각 픽셀에 대해4개의 디바이스 픽셀이 표시되므로 어떻게 해야 합니까?50% 확대/축소하면 이 디바이스는 하나의 디바이스 픽셀에 하나의 이미지 픽셀을 표시합니다.
하지 않았지만 IE를 elem 함께
min-width: 100%
그리고나서
window.document.width / elem.clientWidth
줌('/'/'/'/'/'/'/'/' 포함)을 합니다.document.body.style.zoom□□□□□□□□★
이것은 Chrome용입니다.사용자 800583의 답변에 따라...
이 문제에 대해 몇 시간을 할애했지만 더 나은 방법을 찾지 못했습니다.
- 10이 아닌 16개의 줌 레벨이 있습니다.
- 되었을 때의 은 Chrome이 .
window.outerWidth/window.innerWidth그렇지 않을 경우 비율은 다음과 같습니다.(window.outerWidth-16)/window.innerWidth, 첫 는 두 케이스로 할 수
그래서 저는 다음과 같이 왔습니다.
그러나 이 방법에는 한계가 있습니다.예를 들어 애플리케이션 창에서 아코디언을 재생하면(창의 폭을 빠르게 확대 및 축소), 줌은 변경되지 않았지만(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 ]
);
모바일 전용 솔루션(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());
});
핀치모브 직후에 줌레벨을 하려면 렌더링 지연으로 인해 약간의 타임아웃을 설정할 필요가 있을 것입니다(하지만 테스트하지 않았기 때문에 잘 모르겠습니다).
이 답변은 사용자 1080381의 답변에서 devicePixelRatio가 잘못 반환된 것에 대한 코멘트에 기초하고 있습니다.
데스크톱, Surface Pro 3, Surface Pro 4에서 작업할 때도 이 명령어가 잘못 반환되는 경우가 있습니다.
데스크탑에서는 동작하고 있습니다만, SP3와 SP4는 서로 다른 수치와 데스크탑을 나타내고 있었습니다.
SP3가 기대했던 줌의 1.5배로 돌아오고 있는 것을 알 수 있었습니다.디스플레이 설정을 확인해보니 SP3는 데스크탑의 100%가 아닌 150%로 설정되어 있었습니다.
따라서 코멘트에 대한 해결책은 반환되는 줌 레벨을 현재 사용하고 있는 머신의 스케일로 나누는 것입니다.
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
사용자 1080381의 원래 답변에 100을 곱하면 100(%)의 줌이 됩니다.
현재 동작하고 있지만 브라우저별로 분리해야 합니다.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()
};
}
이것은 규모를 감지합니다.
html 코드:
<body id="blog">
js:
function scale(){
return Math.round(100/(d.getElementById('blog').offsetWidth/d.getElementById('blog').getBoundingClientRect().width))/100;
}
확대/축소 배율과 배율은 서로 혼동하지 마십시오.사용자가 "확대"를 제어합니다. "확대"는 CSS 변환입니다.그러나 11년 10개월 전 Understack은 다음과 같이 지적했습니다.
기본적으로 100% 줌의 DIV 치수를 알고 싶습니다.
이걸로 끝이야.@media 쿼리와 함께 사용하여 JavaScript 디바이스 스케일링을 검출합니다.예를 들어 360x720은 0.5 스케일링, 720x360, 0.75를 적용할 수 있습니다.
var d=document;
다른 방법을 사용하여 고정 높이와 폭 100px, 위치 고정 및 불투명도 0의 돔 요소를 만들었습니다. 기본적으로 숨겨진 요소입니다.
그리고 돔 투 이미지를 사용하여 이 요소를 오버킬처럼 들릴 수 있는 이미지로 캡처했지만 방탄 솔루션을 원했고 이 패키지를 이미 사용하고 있었습니다.그리고 출력 이미지 폭은 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;
});
}
이것은 누구에게나 도움이 될 수도 있고 도움이 되지 않을 수도 있지만, 어떤 CSS 트릭을 사용해도 올바르게 중앙에 접근할 수 없는 페이지가 있었기 때문에 JQuery 파일 Call Center Page를 작성했습니다.
브라우저 확대/축소 레벨에서 문제가 발생했습니다.100%, 125%, 150% 등에 따라 페이지가 이동합니다.
아래 코드는 centerpage.js라는 JQuery 파일에 있습니다.
마스터 페이지에 이미 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.
});
순수하게 JavaScript를 사용하여 DPPX(줌 레벨)를 찾는 FireFox 16+의 회피책:
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);
문제는 사용하는 모니터의 종류(4k 모니터와 표준 모니터)에 있습니다.Chrome은 지금까지 가장 스마트한 방법으로 줌 레벨을 알 수 있습니다.window.devicePixelRatio픽셀 밀도가 어느 정도인지 알 수 있고 무엇을 의미하는지 같은 수치를 보고할 수 있습니다.
다른 브라우저는 별로 없어요.IE와 Edge는 확대/축소 수준을 처리하는 방식이 크게 다르기 때문에 아마 최악일 것입니다.4k 모니터에서 동일한 크기의 텍스트를 가져오려면 표준 모니터에서 100%가 아닌 200%를 선택해야 합니다.
다음은 2018년 5월 현재 가장 인기 있는 브라우저인 Chrome, Firefox 및 IE11의 줌 수준을 감지하기 위한 것입니다.줌 비율을 알려줄 수 있어요.IE의 경우 실제로 200%인 4k 모니터에서도 100%로 보고되지만 텍스트 크기는 거의 동일합니다.
여기 바이올린이 있습니다.https://jsfiddle.net/ae1hdogr/
만약 다른 브라우저를 시도해서 바이올린을 업데이트 하고 싶은 사람이 있다면 그렇게 하세요.나의 주된 목표는 웹 어플리케이션을 사용하기 위해 사람들이 100% 이상의 줌 배율을 사용하고 있는지 여부를 감지하고 더 낮은 줌 배율을 나타내는 알림을 표시하기 위해 이 3개의 브라우저를 커버하는 것이었다.
여기에서는 변경되지 않습니다!:
<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의 폭을 표시합니다(적어도 파이어폭스와 ie8의 경우).
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;
};
언급URL : https://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers
'source' 카테고리의 다른 글
| Rails 5 커스텀 데이터베이스 타입GIS + Maria의 경우DB (0) | 2022.10.20 |
|---|---|
| MySQL의 두 시간 필드와의 차이(분) (0) | 2022.10.20 |
| MySQL 쿼리 / 절 실행 순서 (0) | 2022.10.20 |
| 연결 배열 키 목록을 가져오는 중 (0) | 2022.10.20 |
| 대규모 어레이를 선언할 때 스택 오버플로 예외가 발생하는 중 (0) | 2022.10.20 |