How to set viewport dynamically?

Question

If I want to change the viewport tag dynamically, what do I need to do?

For Mobile

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

iPad (width over 768px)

<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=2, user-scalable=yes" /> 

Answer 1

For sample :

<meta name="viewport" content="width = 384" id="myViewport">

It sets the layout viewport width to 384 pixels. This works in most modern browsers; Nokia WebKit being the prime exception.

You might want to give the layout viewport a width of 380px unless you’re on a widescreen (read tablet as you expect) device, in which case you might want to double it to 768. Or whatever.

<meta id="myViewport" name="viewport" content="width = 384">
<script>
if (screen.width > 768) {
    var mvp = document.getElementById('myViewport');
    mvp.setAttribute('content','width=768');
}
</script>

This script is executed automatically and changes the meta viewport tag directly.

It’s also possible to force a change much later, after the page has been downloaded and rendered:

<meta id="myViewport" name="viewport" content="width = 384">
<script>
window.onload = function () {
    if (screen.width > 768) {
        var mvp = document.getElementById('myViewport');
        mvp.setAttribute('content','width=768');
    }
}
</script>