자바 스크립트로 줌 레벨을 어떻게 동적으로 변경합니까?

Question

저는 웹 페이지에서 줌 레벨을 재설정하는 방법을 알아 내려고하고 있습니다. 사용자가 핀치 확대/축소를 수행하면 확대/축소 기능이 더 이상 작동하지 않는 것처럼 보입니다. 꼬집고있는 제스처를 원하지만 프로그래밍 방식으로 줌을 재설정하려고합니다. 누구나 Javascript/jQuery를 사용하여 동적으로 줌을 변경하는 방법에 대한 아이디어가 있습니까?

 

<meta id="viewportMeta" name="viewport" content="user-scalable=1, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5" /> 
 

$(document).ready(function() { 
     $("#zoomOut").click(function(){ 
      $('meta[name=viewport]').attr('content', 'initial-scale=0.5; maximum-scale1; user-scalable=1;'); 
     }); 

     $("#zoomIn").click(function(){ 
      $('meta[name=viewport]').attr('content', 'initial-scale=1; maximum-scale=1.0; user-scalable=1;'); 
     }); 
}); 

Answer 1

은 ------ 업데이트 ------

이 iOS7에에 더 이상 문제가되지 않습니다. 그리고 iOS6에서 작동하는 github scottjehl/iOS-Orientationchange-Fix에 대한 Scott Jehl의 더 나은 수정이 있습니다.

------ 원래 대답 ------ 다음에서

촬영 답변 :

• iPad layout scales up when rotating from portrait to landscape
• How do I reset the scale/zoom of a web app on an orientation change on the iPhone?

---

제레미 키스 (@adactio)이 블로그에 대한 좋은 해결책이 있습니다 Orientation and scale

마크 업에서 최대 배율을 설정하지 않아도 마크 업을 확장 가능한 상태로 유지하십시오. 코드가 의도하는 일을하지 않을 경우

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) { 
    var viewportmeta = document.querySelector('meta[name="viewport"]'); 
    if (viewportmeta) { 
     viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0'; 
     document.body.addEventListener('gesturestart', function() { 
      viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6'; 
     }, false); 
    } 
}