Có cách nào để thiết lập lại quy mô của khung nhìn động đến 1.0

Question

Im làm việc trên aa trực tuyến cửa hàng điện thoại di động và đã bị mắc kẹt trong khi thực hiện chức năng zoom sản phẩm

Sau khi nhấp một hình ảnh "người dùng khả năng mở rộng" được phép và quy mô tối đa được đặt thành 10.0 Khi người dùng phóng to trên sản phẩm bằng cử chỉ chụm, mọi thứ hoạt động tốt. Nhưng sau khi đóng Ảnh thu nhỏ, tỷ lệ không được đặt lại thành 1.0.

Có cách nào để đặt lại giá trị quy mô của chế độ xem động không. Các "ban đầu quy mô" dường như không làm việc, không phải không Reseting các "tối thiểu quy mô" và "tối đa quy mô" đến 1.0

Những vấn đề xảy ra trên iPhone/iPad

Có vẻ là một giải pháp , nhưng tôi không biết yếu tố nào tôi nên áp dụng cho bài đăng này: How to reset viewport scaling without full page refresh?

"Bạn cần sử dụng -webkit-transform: scale (1.1); chuyển đổi webkit".

Nhưng tôi không biết yếu tố nào được áp dụng theo kiểu nào.

Dưới đây là một số mã để minh họa sự cố.

Trong Tag meta cho khung nhìn trông như thế này:

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

phần còn lại của trang Trông như thế này:

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

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

và đây là 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, kỹ thuật này cho thao tác khung nhìn hoạt động trên tất cả các trình duyệt hiện đại ngoại trừ 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> 

Có vẻ như các phím được thiết lập một id thuộc tính trong thẻ meta vì vậy bạn có thể chọn nó một cách dễ dàng với JS và thay thế các giá trị của thuộc tính content.

Answer 2

Nó hoạt động trong tất cả các trình duyệt hiện đại. Tôi đã làm điều đó trong một vài trang web và tất cả đều ổn. Nhưng việc đặt lại không phải là giải pháp cho vấn đề. Bạn cần phải thay đổi đúng quy mô và chiều rộng khung nhìn khi hoàn cảnh thay đổi. Bạn cần thay đổi khi thay đổi hướng và khi kích thước màn hình thay đổi và tất nhiên khi tải khi kích thước màn hình được phát hiện. Nếu bạn nhận được giá trị cho chiều rộng hiện tại, bạn có thể tính toán tỷ lệ. (Nhân tiện, khi định hướng là 90 hoặc -90, bạn nên lấy chiều cao là chiều rộng). Ví dụ: Nếu vùng chứa chính của bạn có chiều rộng 960px và chiều rộng hiện tại của bạn là động.

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