동적으로 1.0

Question

임 AA 모바일 온라인 매장 작업 그리고 "사용자 확장 성"이미지를 클릭하면 제품의 줌 기능

을 구현하면서 붙어있어 뷰포트의 규모를 재설정 할 수있는 방법이 있나요이 허용되고, 최대 눈금이 10.0으로 설정되었습니다. 사용자가 꼬집고있는 제스처로 제품을 확대하면 모든 것이 잘됩니다. 확대/축소 된 이미지를 닫은 후에는 눈금이 1.0으로 재설정되지 않습니다.

뷰포트의 스케일 값을 동적으로 재설정하는 방법이 있습니까? 은 "초기 규모는"

가

이 해결책이 될 것 같다 아이폰/아이 패드에서 발생 작동하지 않을 것 같다, 어느 쪽도 1.0

문제점에 대한 "최소한의 규모"와 "최대 규모"를 다시 설정하라는 않는다 하지만이 게시물에 어떤 요소를 적용해야할지 모르겠다. How to reset viewport scaling without full page refresh?

"-webkit-transform : scale (1.1); webkit 전환을 사용해야합니다."

그러나 어떤 요소가 스타일에 적용되는지는 알 수 없습니다.

다음은 문제를 설명하기위한 코드입니다. 뷰포트의 메타 태그에

은 다음과 같습니다

<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0" /> 

페이지의 나머지 부분은 다음과 같습니다

<div id="page"> 
    <img src="images/smallProductImage.jpg"> 
</div> 

<div id="zoom"> 
    <div class="jsZoomImageContainer"></div> 
</div> 

를 이것은 자바 스크립트 ::

zoom:{ 
    img: null, 
    initialScreen:null, 

    load:function(src){    

     //load the image and show it when loaded 

     showLoadingAnimation(); 
     this.img = new Image(); 
     this.img.src = src; 

     jQuery(this.img).load(function(){ 
      zoom.show(); 
     }); 
    }, 

    show:function(){ 

     var screenWidth, screenHeight, imageWidth, imageHeight, scale, ctx;    

     hideLoadingAnimation(); 
     jQuery("#page").hide();   
     jQuery("#zoom").show(); 

     jQuery(".jsZoomImageContainer").empty(); 
     this.initialScreen =[jQuery(window).width(), jQuery(window).height()] 
     jQuery(".jsZoomImageContainer").append(this.img);    


     imageWidth = jQuery(this.img).width(); 
     imageHeight = jQuery(this.img).height(); 

     scale = this.initialScreen[0]/imageWidth ; 

     jQuery(this.img).width(imageWidth * scale) 
     jQuery(this.img).height(imageHeight * scale) 


     jQuery(".jsZoomImageContainer").click(function(){ 
      zoom.hide(); 
     }); 

     jQuery('meta[name="viewport"]',"head").attr("content","user-scalable=yes, initial-scale:1.0, minimum-scale=1.0, maximum-scale=10.0")     

    }, 

    hide:function(){       
     jQuery(".jsZoomImageContainer").empty();       
     jQuery('meta[name="viewport"]',"head").attr("content","user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0") 

     jQuery("#zoom").hide(); 
     jQuery("#page").show(); 

     this.img = null; 
     this.initialScreen = null; 

    } 
} 

jQuery("#page img").click(function(){ 
    zoom.load("images/bigProductImage.jpg"); 
}); 

입니다

Answer 1

According to ppk 뷰포트 조작을위한이 기술은 Firefox를 제외한 모든 최신 브라우저에서 작동합니다 : 당신은 JS와 함께 쉽게 선택하고 content 속성의 값을 교체 할 수 있도록 키가 meta 태그에 id 속성을 설정처럼

<meta id="testViewport" name="viewport" content="width = 380"> 
<script> 
if (screen.width > 740) { 
    var mvp = document.getElementById('testViewport'); 
    mvp.setAttribute('content','width=740'); 
} 
</script> 

보인다.

Answer 2

모든 최신 브라우저에서 작동합니다. 나는 약간 웹 사이트에서 그것을하고 모두 잘 작동한다. 그러나 재설정은 문제의 해결책이 아닙니다. 상황이 바뀌면 배율 및 뷰포트 너비를 올바르게 변경해야합니다. 방향이 바뀌거나 화면 크기가 변경 될 때 변경해야하며 화면 크기가 감지 될 때로드가 필요할 때 변경해야합니다. 현재 폭에 대한 값을 얻으면 축척을 계산할 수 있습니다. (그런데 오리엔테이션이 90 또는 -90 인 경우 너비를 높이로 취해야합니다.) 예 : 기본 컨테이너의 너비가 960px이고 w_width가 현재 너비 인 경우 동적으로 가져옵니다.

scale=100/100/(960/w_width); 
scale=scale.toFixed(2) ; 
jQuery('meta[name=viewport]').attr('content', "width="+w_width+", initial-scale="+scale);