Is there a way to reset the scale of the viewport dynamically to 1.0

14
votes

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");
});
2
javascriptiphoneipadmobileviewport
the solution you mentioned uses CSS to scale things, not the native zoom applied on the viewport. If you want to apply that solution, you should rethink your zooming so it's done by css+javascript – BBog
If you're interested, I wrote an answer (here)[stackoverflow.com/questions/22639296/… about this exact problem. A solution that works (for me) contrary to all the solutions found in answer to your question or that other question. – Alexis Wilke

2 Answers

1
votes

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.

1
votes

It works in all modern browsers. I have done it in a few websites and all work fine. But resetting is not a solution to the problem. You need to properly change scale and viewport width when circumstances change. You need to change it when orientation changes and when screen size changes and of course on load when screen size is detected. If you get values for current width, you can calculate the scale. (By the way, when orientation is 90 or -90, you should take height as width). For example, If your main container is 960px in width, and w_width is the current width you get dynamically. 

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