어드민

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

편집 (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>

답변

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

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

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";
}

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);

var isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;

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