Question

I have an iPhone web application that creates a “meta viewport” tag dynamically, using Javascript, depending on certain user-configured settings.

I want to provide a default meta viewport tag in case Javascript is disabled, but can’t find a proper way to do it.

I tried this:

<noscript>
<meta name="viewport" content="initial-scale=1.0">
</noscript>

And it does work, however it does not seem to be valid, as noscript is apparently not allowed in the HEAD section of an HTML document (I also looked at this question)

Any alternatives?

Edit:

I already tried having a default meta viewport tag, then removing (or replacing) it with Javascript. This “almost” works: You can indeed modify an existing viewport meta tag with Javascript (the technique is well described here). However there are some limitations: While you can modify the value of a given property, you can NOT make the device “forget” (reset to default value) a property that has already been defined. Also, simply removing the meta tag with Javascript doesn’t work.

Answer 1

Tricky.

Have you tried

<meta name="viewport" content="initial-scale=1.0">

<script>
document.write('<meta name="viewport" content="initial-scale=2.0">');
</script>

? (2.0 being the scale than you would want to set if scripting is enabled)

I can’t find any binding info on whether this is legal, but it seems to be in HTML. The question is whether it’ll be parsed correctly.

Other than that, I can think of only two alternatives:

• Detecting Javascript support on server side, and serving two different pages, one with, one without the meta tag

• Always embedding the viewport tag, and removing it using Javascript – I have no idea whether this’ll work, though.