IE/Edge 페이지 터치 확대/축소(Pinch-Zoom)

IE/Edge에서만 동작하는 터치 확대/축소(Pinch-Zoom) 기법 정리

Windows 10 키오스크 모드로 동작하는 웹 사이트를 만들고 있는데, Windows 10 키오스크 모드, 즉 할당된 액세스(Assigned Access) 모드로 동작하려면 UWP(Universal Windows Platform) 앱으로 만들어야 하고, UWP 앱의 WebView 환경은 Edge 브라우저 기반이므로 Edge 브라우저에서만 잘 동작하면 장땡이니 모든 브라우저에서 호환되는 속성이나 스타일을 사용할 필요는 없다는 전제로 정리했다. 또, 모바일이 아닌 터치 모니터에서 손가락을 이용하여 확대/축소를 특정 영역에 한해서만 동작되도록 해야하는 상황을 가정한다.

Windows 10 키오스크 모드 외에도 Windows 10 Enterprise 버전에서는 Shell Launcher라고, 특정 프로그램을 Shell로 지정하여 해당 프로그램만 실행되도록 하는, 사실상의 키오스크 모드도 가능하긴 하나 설정하기 조금 번거롭다(참고: https://docs.microsoft.com/en-us/windows-hardware/customize/enterprise/shell-launcher).

1. HTML 전체에 다음 CSS Style을 사용하여 터치 확대/축소가 안되도록 한다.

html { -ms-content-zooming: none; touch-action: none; }

2. 터치 확대/축소를 특정 영역(div)에만 허용한다.

div.zoomable {
  -ms-content-zooming: zoom;
  touch-action: auto;
  overflow: auto;
  -ms-overflow-style: none;
}

3. 해당 div의 CSS Style을 이용하여 확대/축소의 범위를 지정한다.

div.zoomable { -ms-content-zoom-limit-min: 100%; -ms-content-zoom-limit-max: 300%; }

3.1. 200%로 확대하려고 할 때

$(".zoomable").css("-ms-content-zoom-limit-min", "200%");

setTimeout( function() { $(".zoomable").css("-ms-content-zoom-limit-min", "100%"); }, 200 );

최소값을 올려서 강제 확대한 후 잠시 후 다시 원래값을 주어 축소가 가능하도록 해 주는 것이 포인트.

3.2. 120%로 축소하려고 할 때

$(".zoomable").css("-ms-content-zoom-limit-max", "120%");

setTimeout( function() { $(".zoomable").css("-ms-content-zoom-limit-max", "300%"); }, 200 );

마찬가지로, 최대값을 줄여서 강제 축소 후 잠시 후 원래값을 주어 확대 가능하도록 한다.

4. msContentZoomFactor 속성을 이용하여 스크립트로 확대/축소를 모니터링하고 제어할 수도 있다.

// 현재 Zoom값 얻어오기

var currentZoom = $(".zoomable")[0].msContentZoomFactor;

// 200%로 확대

$(".zoomable")[0].msContentZoomFactor = 2.0;

-ms-content-zooming style이 zoom으로 지정된 DOM 객체에서만 유효한 값이 설정된다.

>> 참고: https://developer.mozilla.org/en-US/docs/Web/CSS/-ms-content-zooming

>> 참고: https://msdn.microsoft.com/library/Hh772066