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

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

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

[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