Is Is Possible To Change Page Zoom In Mobile Safari Via Javascript?

I have a site using jquerymobile. It loads an initial webpage, and then as other pages are clicked, they are loaded in an 'overlay' which slides over the top. Just like this: http

Solution 1:

Actually, I just had to solve that specific problem myself so I hope this answer helps out someone else. The scenario I ran up against specifically is that I have a website (which is more like a web app) that was not built in a responsive design, but still intended to be mobile friendly. One of the interface features is the inclusion of a jQuery Dialog window containing a form. When a user fills out that form on a mobile phone such as a Droid or an iPhone, 9 times out of 10, the user will "pinch zoom" to fill out the form. All you need to do is trigger this function on some event, in my case, it was the click of the submit button.

function changeZoomLevel() {
        var sViewport = '<meta name="viewport" content="width=960">';
        var jViewport = $('meta[name="viewport"]');
        if (jViewport.length > 0) {
            jViewport.replaceWith(sViewport);
        } else {
            $('head').append(sViewport);
        }
}

Of course, you will change the width attribute to whatever the width of the framework of your website is. But this will do the trick.

Solution 2:

No there is no way to control browser zoom. You should use JavaScript to zoom (or scale) your objects in the browser. It's best to switch pinching off by setting user-scalable to no