Question

45

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

rated 0 times [ 47] [ 2] / answers: 1 / hits: 114861 / 14 Years ago, fri, august 27, 2010, 12:00:00

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?

<meta name=viewport content=width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; />

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

donaldcristianl

Add To Favorites

Follow

Total Points: 114

Total Questions: 95

Total Answers: 110

Location: Bonaire

Member since Sat, May 27, 2023

1 Year ago

answered 14 Years ago tayaw · Accepted 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('<meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>');