브라우저 확대/축소 상태 구현 code_javascript 기술의 JavaScript 감지

여기서 언급된 확대/축소는 브라우저 크기의 확대/축소를 의미하는 것이 아니라 브라우저 웹페이지 콘텐츠의 백분율 확대/축소를 의미합니다(확대하려면 Ctrl과 키 또는 - 키를 누르세요).
이 확대/축소를 감지하는 방법에는 여러 가지가 있습니다. QQ Space는 플래시를 사용하여 브라우저가 확대되고 있는지 여부를 감지합니다. 다음은 브라우저 확대/축소를 감지하는 자바스크립트 방법입니다.
IE6의 경우 IE6은 텍스트만 확대/축소할 수 있으므로 무시하세요.
먼저 브라우저에서 제공하는 표준 감지 인터페이스에 대해 이야기하겠습니다. window.devicePixelRatio는 장치 독립적인 픽셀에 대한 장치의 물리적 픽셀 비율입니다. 이 속성은 웹 페이지의 크기가 조정되었는지 감지하는 데 사용할 수 있습니다. 일반 PC 브라우저에서 기본값은 기본적으로 크기 조정이 없는 1입니다. 현재는 Firefox, Chrome 등이 잘 지원됩니다.
자, 이제 IE가 이를 어떻게 처리하는지 이야기할 차례입니다. IE는 window.screen.deviceXDPI와 window.screen.logicalXDPI라는 두 가지 속성을 제공합니다. deviceXDPI는 장치의 물리적 픽셀에 해당하고, logicXDPI는 장치의 독립 픽셀 비율에 해당합니다. 표준 탐지 인터페이스는 IE 방법을 기반으로 한 개선일 뿐인 것으로 추정됩니다. Windows XP 이상의 시스템에서 이 두 속성의 기본값은 96입니다. 왜냐하면 시스템 기본값이 96dpi이기 때문입니다.
위의 두 가지를 모두 지원하지 않는 브라우저의 경우 window.outerWidth 및 window.innerWidth 속성을 사용할 수도 있습니다. externalWidth는 창 요소의 실제 외부 너비를 반환하고 innerWidth는 창 요소의 실제 내부 너비를 반환합니다. 두 너비 모두 스크롤 막대의 너비를 포함합니다.
이러한 속성을 사용하면 기본적으로 PC 브라우저에서 일반 브라우저를 처리할 수 있습니다. 구현 코드는 다음과 같습니다.

DetectZoom 함수의 반환 값이 100이면 기본 확대/축소 레벨이고, 100보다 크면 확대되고, 100보다 작으면 축소됩니다.

function detectZoom (){ 
  var ratio = 0,
    screen = window.screen,
    ua = navigator.userAgent.toLowerCase();

   if (window.devicePixelRatio !== undefined) {
      ratio = window.devicePixelRatio;
  }
  else if (~ua.indexOf('msie')) {  
    if (screen.deviceXDPI && screen.logicalXDPI) {
      ratio = screen.deviceXDPI / screen.logicalXDPI;
    }
  }
  else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
    ratio = window.outerWidth / window.innerWidth;
  }
  
   if (ratio){
    ratio = Math.round(ratio * 100);
  }
  
   return ratio;
};

원본 기사, 재인쇄 시 표시해 주세요: 프론트엔드 개발

에서 재인쇄됨