有沒有辦法到視規模重置動態1.0

Question

進出口工作在AA移動在線商店，而實現產品的變焦功能

點擊圖像「用戶可升級」後陷是允許的，最大比例設置爲10.0 當用戶用捏手勢放大產品時，一切正常。 但是在關閉縮放圖像後，縮放不會重置爲1.0。

有沒有辦法重置視口的比例值動態。 「初始規模」似乎不工作，既不確實正在重置「最低級」以及「最大規模」至1.0

的問題發生在iPhone/iPad的

似乎有一個解決方案，但我不知道哪一個元素，我應該使用對這個職位： How to reset viewport scaling without full page refresh?

「您需要使用-webkit-變換：規模（1.1）; WebKit的過渡」

但我不知道風格應用於哪個元素。

下面是一些代碼來說明問題。

在視口的meta標籤是這樣的：

<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> 

，這是JavaScript ::

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之外的所有現代瀏覽器：

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

好像關鍵是設定在meta標籤的id屬性，這樣你就可以輕鬆JS選中它並更換content屬性的值。

Answer 2

它適用於所有現代瀏覽器。我已經在一些網站上完成了，並且一切正常。 但重置不是解決問題的辦法。環境變化時，您需要正確更改比例和視口寬度。 您需要在方向更改時以及屏幕尺寸發生變化時進行更改，當然還需要在檢測到屏幕尺寸時進行更改。如果您獲取當前寬度的值，則可以計算比例。 （順便說一下，當方向是90或-90時，你應該把高度看作寬度）。 例如， 如果您的主容器寬度爲960像素，並且w_width是動態獲取的當前寬度。

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