動的1.0

Question

ImはAAモバイルオンラインストアに取り組んでおり、「ユーザースケーラブルな」画像をクリックすると、製品のズーム機能

を実装しながら、行き詰まっにビューポートの尺度をリセットする方法はありますが許可され、最大スケールは10.0に設定されています。 ピンチジェスチャーでユーザーが製品をズームすると、すべて正常に動作します。 ズームした画像を閉じると、スケールは1.0にリセットされません。

ビューポートのスケール値を動的にリセットする方法はありますか？ 「初期スケールは」動作しないようですが、どちらも1.0

に問題を「最小スケール」および「最大規模」をresetingんが、iPhone/iPadの

に発生した解決策があるようです How to reset viewport scaling without full page refresh?

は：が、私はこの記事に適用する必要のある要素か分からない「あなたは-webkit-変換を使用する必要があります。スケール（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> 

、これは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を除くすべての最新のブラウザで動作します：あなたは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);