I use this two functions to set and reset scale values when I instigate a JS app from an HTML page.

function setMeta(){
        alert("meta set");
        oldcontent=$('meta[name=viewport]').attr('content') //store the current value
        $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, user-scalable=0');
}

function resetMeta(){
        alert("meta reset");
        $('meta[name=viewport]').attr('content', oldcontent);

}

The code works fine except if the HTML page is scaled to a larger value it doesn't get set to 1.0 as in setMeta method. Other values like user-scalable work fine. Example: In the HTML page we are alowed to scale but in the app we are not.

This doesnt work either: document.body.style.zoom="100%"; why isn't the reseting of scale to 1.0 working?

I use this two functions to set and reset scale values when I instigate a JS app from an HTML page.

function setMeta(){
        alert("meta set");
        oldcontent=$('meta[name=viewport]').attr('content') //store the current value
        $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, user-scalable=0');
}

function resetMeta(){
        alert("meta reset");
        $('meta[name=viewport]').attr('content', oldcontent);

}

The code works fine except if the HTML page is scaled to a larger value it doesn't get set to 1.0 as in setMeta method. Other values like user-scalable work fine. Example: In the HTML page we are alowed to scale but in the app we are not.

This doesnt work either: document.body.style.zoom="100%"; why isn't the reseting of scale to 1.0 working?

• javascript
• html
• scale

• Sory if I'm being too ignorant, but isn't these what you're needing?: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> – Santiago Baigorria Commented Apr 9, 2013 at 12:40
• 1 Yes but it need to change dynamically with JS. – Jacob Commented Apr 9, 2013 at 12:41
• Oh right, sory. I'm actually a designer that more or less understands how to apply JS, not how to build it! Sory then. Luck! – Santiago Baigorria Commented Apr 9, 2013 at 12:44
• It could be that there's no way to do this dynamically. I would consider an alternate solution (like serving different versions from the server) – Joeri Sebrechts Commented Apr 11, 2013 at 13:12
• Are you forcing a resize event on the window after changing the values? – thefrontender Commented Apr 16, 2013 at 4:44

2 Answers 2

This approach is unfortunately never going to work, because the variable that stores the content attribute of the viewport meta tag (in this case defaultContent) is always going to fetch the current value. The only way to make this work is to define defaultContent explicitly, as I have done with customContent.

Firstly, let's see why the initial approach doesn't work:

Try this code on your console while visiting Smashing Magazine:

defaultContent = jQuery('meta[name=viewport]').attr('content'); // store the current value in a global variable
console.log(defaultContent);

function setV(){
    // override the global variable value with a scoped variable
    var customContent = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, user-scalable=0';
    jQuery('meta[name=viewport]').attr('content', customContent);
    console.log('Set viewport content to: ' + customContent);
}
function resetV(){
    jQuery('meta[name=viewport]').attr('content', defaultContent);
    console.log('Reset viewport content to: ' + defaultContent);
}

Make sure you test setV(); or resetV(); directly on the console, by typing them and clicking Run again. As you can see, it won't work because defaultContent is set to fetch a dynamic value, that gets changed by the setV() function.

To make it work

As I already mentioned, if you want it to work on your site, you could define a new variable with the defaultContent value (default content attribute of the viewport meta tag), so you have it properly stored from the start - like so:

defaultContent = 'width=device-width, initial-scale=1.0';
customContent = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, user-scalable=0';

function setV(){
    jQuery('meta[name=viewport]').attr('content', customContent);
    console.log('Set viewport content to: ' + customContent);
}
function resetV(){
    jQuery('meta[name=viewport]').attr('content', defaultContent);
    console.log('Reset viewport content to: ' + defaultContent);
}

Not that I changed $ to jQuery to avoid conflict at Smashing Magazine.

One thing to note, when resetting the viewport tag, you must remember to overwrite the previous viewport attributes you set. For example, if you wish to set your viewport tag to

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

In your resetMeta() function, you need to set the values back to something like this

<meta name="viewport" content="width=920, initial-scale=5.0, maximum-scale=5.0, user-scalable=yes" />

And not something like this:

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

Remembering not to miss out any widths or scales.

An edited version of your example: http://hosting.ambc.hostei./html/test.html