Im working on a a mobile online-store And got stuck while implementing the product zoom function
After clicking an Image "user-scalable" is allowed and maximum-scale is set to 10.0 When the user zooms in on the product with a pinch gesture, everything works fine. But after closing the zoomed Image the scale is not reset to 1.0.
Is there a way to reset the scale value of the viewport dynamically. The "initial-scale" seems not to work, neither does reseting the "minimum-scale" and "maximum-scale" to 1.0
The problems occurs on iPhone / iPad
There seems to be a solution, but i don't know to which element i should apply the on this post: How to reset viewport scaling without full page refresh?
"You need to use -webkit-transform: scale(1.1); webkit transition."
But I don't know to which element the style is applied.
Here is some code to illustrate the Problem.
In the meta Tag for the viewport looks like this:
<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0" />
the rest of the page Looks like this:
<div id="page">
<img src="images/smallProductImage.jpg">
</div>
<div id="zoom">
<div class="jsZoomImageContainer"></div>
</div>
and this is the 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");
});
According to ppk, this technique for viewport manipulation works on all modern browsers except for 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>
Seems like the key is setting an id
attribute in the meta
tag so you can select it easily with JS and replace the value of the content
attribute.