모든 최신 브라우저에서 페이지 확대 / 축소 수준을 감지하는 방법은 무엇입니까?

310

  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>
javascript  browser  zoom  detection 
— 언더 스택
소스
1
기본적으로 100 % 줌에서 DIV의 치수를 알고 싶습니다.
— understack
4
기본적으로 2019 년 에는 줌을 감지 할 수있는 방법이 없습니다 .Mac Catalina의 Chrome 78에서 아래의 모든 솔루션을 테스트했지만 그중 아무것도 작동하지 않았습니다.
— collimarco

답변:

274

이제이 질문을 처음 받았을 때보 다 훨씬 더 엉망입니다. 내가 찾은 모든 답변과 블로그 게시물을 읽은 내용을 요약하면 다음과 같습니다. 또한 이 페이지를 설정 하여 줌 레벨을 측정하는 모든 방법을 테스트합니다 .

편집 (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 (의견에 Teo 덕분에)
  • WebKit :으로 원하는 div 크기를 측정합니다 -webkit-text-size-adjust:none.
  • WebKit : ( r72591 이후 끊어짐 ) document.width / jQuery(document).width()( 위의 Dirk van Oosterbosch 에게 감사드립니다 ). 기본 줌 대신 기기 픽셀로 비율을 얻으려면을 곱하십시오 window.devicePixelRatio.
  • 올드 웹킷? (확인되지 ​​않음) : parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth( 이 답변에서 )
  • 오페라 : document.documentElement.offsetWidth/ position:fixed; width:100%div의 너비 . 여기에서 ( Quirksmode의 너비 테이블 은 버그라고 말합니다; innerWidth는 CSS px이어야합니다). 스크롤바가있는 공간을 포함하여 뷰포트의 너비를 얻기 위해 position : fixed 요소를 사용합니다 . document.documentElement.clientWidth는이 너비를 제외합니다. 2011 년 이래로 깨졌습니다. 더 이상 Opera에서 확대 / 축소 수준을 얻을 수있는 방법이 없습니다.
  • 기타 : Sebastian의 플래시 솔루션
  • 신뢰할 수 없음 : 마우스 이벤트를 듣고 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>
— 욘란
소스
1
IE 8.0.7601.17514 (최신)에서는 작동하지 않지만 매우 훌륭합니다. 모든 브라우저에서 작동하는 단일 함수 getZoom () 으로이 모든 것을 마무리 할 수 ​​있습니까? 아마도 jQuery 플러그인으로 출시됩니까? 다시 잘 했어
— ripper234
1
@yonran great plugin !, 그러나 그것은 IE9에서 작동하지 않습니다zoom: screen.deviceXDPI / screen.logicalXDPI,zoom: screen.systemXDPI / screen.logicalXDPI,
— Daniel
1
@RobW, Firefox 4 용으로 처음 썼을 때 Firefox에는 없었습니다 matchMedia. Paul Irish는 Modernizr의 일부인 비슷한 matchMedia polyfill 을 작성했습니다 .
— yonran
7
좋은 소식입니다, 여러분! 그들은 마지막으로 해냈습니다! Vieport API! chromestatus.com/feature/5737866978131968 나는 그것을 테스트, 좋은 물건!
— Teo
3
뷰포트 API는 핀치 줌에만 작동합니다. 바탕 화면을 확대 / 축소하면 배율이 1이라고 표시됩니다. @Jason T Featheringham "차별"외에 확대 / 축소 수준을 알고 싶은 이유가 있습니다. 확대 / 축소는 도메인의 모든 페이지에서 설정되지만 도움말 페이지 에서와는 달리 게임 페이지 또는 확장 팝업에서 다르게 처리 할 수 ​​있습니다.
— Pudica
61

당신은 시도 할 수 있습니다

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

레티 나가 아닌 디스플레이에서 브라우저 확대 / 축소 비율 수준을 제공합니다. 높은 DPI / 레티 나 디스플레이의 경우 다른 값을 생성합니다 (예 : Chrome의 경우 200, Safari의 경우 140, Firefox의 경우 140).

줌 이벤트를 잡기 위해 사용할 수 있습니다

$(window).resize(function() { 
// your code 
});
— 사용자
소스
1
모바일 장치에서도 완벽하게 작동합니다. 어떤 모바일 장치가 무엇을 가지고 있는지 보는 것도 매우 흥미 롭습니다 devicePixelRatio. 또한 줌 이벤트가 발생하거나 초기 값이 변경 될 때 fixed요소를 absolute위치가 지정된 요소로 전환하는 데 크게 도움이되었습니다 devicePixelRatio. 완전한! 감사합니다!!
— lowtechsun
12
예상대로 작동하지 않습니다 : 브라우저가 확대 / 축소되지 않으면 MacBook의 Chrome에서 망막이있는 200에서 200을 반환합니다.
— Terite
19
높은 DPI 화면을 지원하는 브라우저는 그러한 디스플레이를 사용할 때 예상되는 결과를 얻지 못하고 Safari는 디스플레이에 관계없이 예상하지 않습니다.
— Fredrik C
IE에 관심이있는 사람이라면 IE11에서만 작동합니다 (IE10 이하에서는 NaN을 반환합니다)
— scunliffe
3
Math.round(window.devicePixelRatio * 100)Chrome, IE, Edge 및 Firefox에서 작동합니다. iMac의 Safari는 항상 200을 반환합니다.
— Super Jade
45

나에게 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";
}
— 사용자
소스
1
아주 좋아요 Chrome에서 확대 / 축소되는지 여부 만 알아야하는 경우 :isZoomed = (screenCssPixelRatio < .98 || screenCssPixelRatio > 1.02)
— Brent Faust
1
음, window.outerWidth도 줌으로 변경됩니다. 또한 모든 OS에서 창 테두리 너비는 8 픽셀이 아닙니다 (같은 OS에서도 디자인이 다를 수 있음). 그러나 창 테두리가 두 번 있기 때문에 8이 아닌 16을 빼는 것이 좋습니다. 또한 일부 브라우저는 실제 렌더링 창에 테두리가 있고 (FF와 같은) 일부 브라우저에는 (Safari가 아님)-브라우저를 사용하는 OS에 따라 다릅니다 (예 : Safari에는 Windows에 테두리가 있음). 초기 innerWidth (예 : 페이지로드)를 백업하고이를 사용하여 기본 줌이 100 % 인 경우에만 더 잘 작동합니다.
— StanE
1
나를 위해 무엇이든 상관없이 0을 출력합니다 (2017, feb).
— Tiberiu-Ionuț Stan
1
switch진술은 다른 진술보다 많은 것이 좋습니다.
— Edric
작동하지 않습니다. Mac의 Chrome에서 테스트되었으며 확대 / 축소 수준에 관계없이 항상 동일한 비율을 반환합니다.
— collimarco
16

동료와 나는 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);
— 어치
소스
이 메소드는 항상 Firefox 29에서 svg.currentScale = 1을 보고 합니다. 버그 인 줌을 기반으로 전체 화면 크기를 조정하기 때문일 수 있습니다. IE11은 화면 높이가 고정되어있는 뷰포트 devicePixelRatio로 조정 된 데스크톱에서 동일한 문제가있는 것 같습니다.
— hexalys
11

이 기사가 엄청나게 도움이되었습니다. 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 솔루션과 결합하여 몇 줄의 코드만으로 앱을 공격하는 대다수의 브라우저에서 확대를 감지 할 수있었습니다.

— 브라이언
소스
4
미디어 쿼리를 사용하여 실제 확대 / 축소를 감지하는 방법을 코드로 제공해 주시겠습니까?
— TN.
"(너비 : <X> px) 및 (높이 : <Y> px)"만 사용하십시오. 여기서 <X> 및 <Y>는 각각 window.innerWidth 및 window.innerHeight입니다. 아주 작은 양의 줌에서도 작동합니다. Safari에서도 작동합니다.
— 최대
@max JSFIddle 또는 샘플 코드를 제공 할 수 있습니까?
— lowtechsun
macbook pro와 같은 망막 장치에서 항상 true를보고합니다.
— Matthew Sanders
codepen.io/anon/pen/LgrGjJ 는 미디어 쿼리를 사용한 이진 검색을 보여 주지만 쿼리와 동일 devicePixelRatio합니다. 디스플레이 크기 조정을 고려합니다.
— ZachB
11 
zoom = ( window.outerWidth - 10 ) / window.innerWidth

그게 당신이 필요한 전부입니다.

— 알렉스 폰 손
소스
왜 빼기 10에서 outerWidth?
— callum
스크롤바 일 가능성이 높습니다. iOS에서도 훨씬 더 작은 스크롤바도 다릅니다. 게다가이 솔루션은 크롬 만있는 것 같습니다
— Sarah
1
사용자가 FF
— Gerrit Sedlaczek
7

2016 년 1 월 현재 이에 대한 솔루션이 있습니다. 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이면 줌이 적용됩니다. 이 둘의 차이는 줌의 양을 알려줍니다.

NB 거리 계산은 거의하지 않습니다. 예를 들어, 이전 마우스와는 거리가 먼 새 마우스 이벤트를 샘플링 할 수있는 경우.

제한 사항 : 사용자가 마우스를 약간 움직인다고 가정하고이 시점까지 확대 / 축소를 알 수 없습니다.

— 사용자 1191311
소스
1
나는 "먼 거리"가 100 픽셀 인 jsfiddle.net/Terite/9b6ko854 라는 바이올린을 만들었습니다 . 불행히도 그것은 망막 디스플레이가있는 MacBook의 Firefox (52)에서 불안정하게 작동합니다. 또한 Window 7 인터페이스 확대 / 축소 125 %는 Chrome, Firefox 및 IE11 (기본 확대 / 축소 125 %)에서 브라우저 확대 / 축소로 감지됩니다.
— Terite
귀하의 바이올린은 Firefox 및 Chrome을 사용하여 Linux에서 테스트되었습니다. :
— user1191311
Retina 디스플레이는 픽셀 크기를 잘못보고하기 때문에 또 다른 수준의 난이도를 추가합니다.
— user1191311
3

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에는 줌이 존재하지 않으므로 줌을 확인할 필요가 없습니다.

— 펜치
소스
1
흥미 롭군 나에게, 그것은 항상 줌의 80 %를 보여줍니다 ... 나는 이것이 Windows 7 수준에서 큰 글꼴을 설정했기 때문이라고 생각합니다 (제어판에서 "글꼴 크기"를 검색하십시오). @yonran의 답변에서 IE8 솔루션보다 나에게 전혀 효과가 없었습니다. jsbin.com/obowof
— ripper234
확대 / 축소를 100 %로 설정하면 101 %가 나타납니다.
— Allen Wallace
나도. 0.9 대신 0.4999 사용
— yan bellavance
ieZoomLevel = ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.4999) .toFixed ();
— yan bellavance
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>

추신 : 이것은 내 첫 번째 게시물입니다, 실수를 용서하십시오

— 아비 ish 보라
소스
3
불행히도, 이것은 사용자가 브라우저를 최대화 한 경우에만 작동합니다 ( screen.availWidth브라우저 창이 아닌 화면 너비를 화면 픽셀로보고 함).
— Bailey Parker
3

이것은 웹킷 기반 브라우저 (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;
— 루돌프 크
소스
5
document.widthundefined 반환
— Adam
줌 (2017, feb, 망막 디스플레이)에 관계없이 항상 true를 반환합니다.
— Tiberiu-Ionuț Stan
3

기본적으로, 우리는 :

  • window.devicePixelRatio 브라우저 수준 줌 *과 시스템 줌 / 픽셀 밀도를 모두 고려합니다.
    * — Mac / Safari 확대 / 축소 수준은 고려되지 않습니다
  • 미디어 쿼리
  • vw/vh CSS 단위
  • resize 확대 / 축소 수준 변경시 트리거되는 이벤트는 창 크기를 효과적으로 조정합니다.

그것은 정상에 충분해야합니다 UX에는 . UI 디자인이 잘못 될 수있는 확대 / 축소 수준을 감지해야하는 경우

피치 줌은 추적하기 어렵고 현재 고려되지 않습니다.

— 키릴 로이드
소스
1
window.devicePixelRatio 좋은 답변입니다 주요 브라우저의 최신 버전에서 작품 - 크롬, 사파리, FF, 에지, IE
— DShultz
@kirilloid Safari에서 "확대 / 축소 수준"을 안정적으로 찾는 데 사용할 수있는 것이 있습니까?
— onassar
1

계산은 여전히 ​​여러 CSS 픽셀을 기반으로합니다. 화면에서 크기가 다릅니다. 이것이 전체 페이지 확대의 요점입니다.

이미지의 각 픽셀에 대해 일반적으로 4 개의 장치 픽셀을 표시하는 192dpi 장치의 브라우저에서 어떤 작업을 원하십니까? 50 % 확대시이 장치는 이제 하나의 장치 픽셀에 하나의 이미지 픽셀을 표시합니다.

— 닐
소스
@ 닐 : 'CSS 픽셀'크기를 어떻게 얻을 수 있습니까?
— understack
CSS는 기본적으로 포인트로 설정되지만 px 치수 수정자를 사용하여 픽셀을 지정할 수도 있습니다. JavaScript에서 검색된 요소 속성은 이미 CSS 픽셀이어야합니다. 따라서 <div>의 너비를 100px로 지정하면 확대 / 축소 수준에 관계없이 JavaScript에서 다시 얻을 수 있습니다.
— Neil
1

Chrome에서

var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");
— 니콜라스 기 스펜
소스
1
브라우저 창의 전체 화면 너비가있는 경우에만 작동합니다.
— tenbits
0

IE이 테스트를하지만, 경우 요소하지 않았다 elem과를

min-width: 100%

그때 

window.document.width / elem.clientWidth

브라우저 확대 / 축소 수준 ( document.body.style.zoom요소 포함 )을 제공합니다.

— 더크 반 오스터 보쉬
소스
이 테스트 만에 확대하는 것은 elem.clientWidth 증가하지 않는 것
— 톰
0

이것은 user800583 답변으로 인해 Chrome 용입니다 ...

나는이 문제에 몇 시간을 보냈고 더 나은 접근법을 찾지 못했습니다.

  • 16 개의 'zoomLevel'이 있으며 10이 아닙니다.
  • 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 ]
);
— 점
소스
"window.outerWidth / window.innerWidth"와 관련하여 잘못된 값을 제공하는 데 문제가 있으며 iframe에 있었기 때문일 수 있습니다. 그래서 내가 한 것은 부모 창을 사용하는 것이
— 었으며
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());

});

핀치 이동 직후 확대 / 축소 수준을 원한다면 렌더링 지연으로 인해 약간의 시간 초과를 설정해야 할 것입니다 (그러나 테스트하지 않았기 때문에 확실하지 않습니다).

— pmrotule
소스
0

이 답변은 user1080381 님의 답변에서 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

user1080381의 원래 답변에 100을 곱하면 100 (%)의 줌이 제공됩니다.

— 카메론 위버
소스
0

현재 작동하고 있지만 여전히 브라우저별로 분리해야합니다. 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()
    };
  }
— 유가 수행자
소스
-1

여기서는 바뀌지 않습니다! :

<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)로 표시됩니다.

@ tfl : 인라인 스타일로 너비를 고정했기 때문입니다. 사례를 표시하도록 샘플을 수정했습니다 (원래 질문에 게시).
— understack
-1

이것은 누군가를 도울 수도 있고하지 않을 수도 있지만, 내가 시도한 Css 트릭에 관계없이 올바르게 센터링 할 수없는 페이지가 있었기 때문에 JQuery 파일 콜 센터 페이지를 작성했습니다.

브라우저의 확대 / 축소 수준에서 문제가 발생했습니다. 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);
    }
}
— 사용자 1054326
소스
-1

이 질문은 오래 전처럼 게시되었지만 오늘은 "확대 및 축소 이벤트 감지 방법"과 같은 답변을 찾고 있었을 때 모든 브라우저에 맞는 하나의 답변을 찾을 수 없었습니다.

Firefox / Chrome / IE8 및 IE9의 경우 확대 / 축소가 window.resize 이벤트를 발생시킵니다. 다음을 사용하여 캡처 할 수 있습니다.

$(window).resize(function() {
//YOUR CODE.
});
— 부미 싱알
소스
-1

FireFox 16+가 JavaScript로 DPPX (확대 / 축소 수준)를 찾는 방법 :

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);
— 렉사 스
소스
망막 디스플레이가있는 MacBook의 Firefox (52)에서 예상대로 작동하지 않습니다. 확대 / 축소 상태가 아닌 경우 2를 반환합니다. 나는 바이올린을 만들었습니다 : jsfiddle.net/Terite/wadkh3ea
— Terite
-1 
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;
};
— 알리
소스
6
코드 작동 방식도 친절하게 설명하십시오. 초보자가 답을 찾으면 도움이 될 것입니다.
— displayName
나는 바이올린을 만들었습니다 : jsfiddle.net/Terite/5n1bk9do As @AlexeySh. 언급했듯이 Chrome (56), Firefox (52)의 망막 디스플레이에서 예상대로 작동하지 않습니다. Safari (10)에서 확대 / 축소도 0으로 표시됩니다.
— Terite
-1

문제는 사용 된 모니터 유형, 4k 모니터 대 표준 모니터에 있습니다. Chrome을 사용하면 줌 레벨이 무엇인지 알려주는 것이 훨씬 똑똑합니다.window.devicePixelRatio 합니다. 픽셀 밀도가 무엇인지 알 수 있고 문제에 대해 같은 숫자를 다시보고 할 수 있습니다.

다른 브라우저는별로 없습니다. IE와 Edge는 확대 / 축소 수준을 크게 다르게 처리하므로 최악 일 수 있습니다. 4k 모니터에서 동일한 크기의 텍스트를 얻으려면 표준 모니터에서 100 % 대신 200 %를 선택해야합니다.

2018 년 5 월 현재 가장 인기있는 브라우저, Chrome, Firefox 및 IE11의 줌 레벨을 감지해야합니다. 확대 비율이 무엇인지 말해줍니다. IE의 경우 실제로 200 % 인 4K 모니터에서도 100 %를보고하지만 텍스트 크기는 실제로 동일합니다.

바이올린이 있습니다 : https://jsfiddle.net/ae1hdogr/

다른 브라우저에서 찌르고 바이올린을 업데이트하려는 사람이 있다면 그렇게하십시오. 내 주요 목표는이 3 개의 브라우저를 사용하여 사람들이 내 웹 응용 프로그램을 사용하기 위해 100 %보다 큰 확대 / 축소 비율을 사용하고 있는지 감지하고 축소 / 축소 비율을 제안하는 알림을 표시하는 것입니다.

— Bill_VA
소스
Mac Book Pro (망막 화면)의 Safari는 0을 반환하고 망막이 아닌 화면의 Chrome은 100, 90 등을 올바르게 반환합니다
— OZZIE
Chrome 및 Firefox 망막 화면에서 200을 반환
— OZZIE
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.