Can I change the viewport meta tag in mobile safari on the fly

Question

I have an AJAX app built for mobile Safari browser that needs to display different types of content   For some content  I need user-scalable 1 and for other ones  I need user-scalable 0   Is there a way to modify the value of the content attribute without refreshing the page    lt meta name  viewport  content  width device-width  initial-scale 1 0  maximum-scale 1 0  user-scalable 0     gt

User · Answer

This has been answered for the most part, but I will expand...

Step 1

My goal was to enable zoom at certain times, and disable it at others.

// enable pinch zoom
var $viewport = $('head meta[name="viewport"]');    
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=4');

// ...later...

// disable pinch zoom
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no');

Step 2

The viewport tag would update, but pinch zoom was still active!! I had to find a way to get the page to pick up the changes...

It's a hack solution, but toggling the opacity of body did the trick. I'm sure there are other ways to accomplish this, but here's what worked for me.

// after updating viewport tag, force the page to pick up changes           
document.body.style.opacity = .9999;
setTimeout(function(){
    document.body.style.opacity = 1;
}, 1);

Step 3

My problem was mostly solved at this point, but not quite. I needed to know the current zoom level of the page so I could resize some elements to fit on the page (think of map markers).

// check zoom level during user interaction, or on animation frame
var currentZoom = $document.width() / window.innerWidth;

I hope this helps somebody. I spent several hours banging my mouse before finding a solution.

User · Answer

in your  lt head gt    lt meta id  viewport        name  viewport        content  width 1024  height 768  initial-scale 0  minimum-scale 0 25    gt    somewhere in your javascript  document getElementById  viewport   setAttribute  content          initial-scale 0 5  maximum-scale 1 0  user-scalable 0           but good luck with tweaking it for your device  fiddling for hours    and i m still not there   source

User · Answer

I realize this is a little old  but  yes it can be done  Some javascript to get you started   viewport   document querySelector  meta name viewport     viewport setAttribute  content    width device-width  initial-scale 1 0  maximum-scale 1 0  user-scalable 0      Just change the parts you need and Mobile Safari will respect the new settings   Update   If you don t already have the meta viewport tag in the source  you can append it directly with something like this   var metaTag document createElement  meta    metaTag name    viewport  metaTag content    width device-width  initial-scale 1 0  maximum-scale 1 0  user-scalable 0  document getElementsByTagName  head   0  appendChild metaTag     Or if you re using jQuery      head   append   lt meta name  viewport  content  width device-width  initial-scale 1 0  maximum-scale 1 0  user-scalable 0  gt

[javascript] Can I change the viewport meta tag in mobile safari on the fly?

Examples related to javascript

Examples related to mobile-safari

Examples related to viewport