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

  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>



답변

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

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

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

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

$(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에서 어떤 이유로 든 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";
}


답변

동료와 나는 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

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


답변

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

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


댓글 달기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다