Viewport meta tag remove bug

Question

My web page has no «meta» viewport tag absolutely.

I have created my own «meta» viewport tag dynamically:

var viewportMeta = document.createElement('meta');
    viewportMeta.setAttribute('id', 'myMeta');
    viewportMeta.setAttribute('name', 'viewport');
    viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=no');

and appended it to the «head» (after some user actions):

document.head.appendChild(viewportMeta);

Then (after user clicks on some button) I need to remove "myMeta" «meta» tag from «head»:

var myMeta = document.getElementById('myMeta');
document.head.removeChild(myMeta);

And it removes, 100%! Checked with desktop browser and with Adobe Edge Inspect Weinre on iPad.

But the whole page does not go to it's previous state! Whole page stays the same, like it has «meta» viewport tag with all defined properties in "viewportMeta" object.

So, is there a way to remove «meta» viewport tag completely? Any ideas?

(This issue is on iPad's Safari and Chrome browsers. Tried not to remove «meta» tag but just changed it's «content» property — no success. Did not checked on Android devices and browsers.)

Ariel Deil Ariel Deil · Accepted Answer · 2013-05-29T13:56:08

You should restore the original value of viewport meta tag

<html>
<head>
    <title>test dynamic view port</title>
</head>
<body>
    <button id="turnOn">on</button>
    <button id="turnOff">off</button>

    <script type="text/javascript">

        function turnOnDeviceViewport() {

            removeMetaIfExist();

            var viewportMeta = document.createElement('meta');
            viewportMeta.setAttribute('id', 'myMeta');
            viewportMeta.setAttribute('name', 'viewport');
            viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=no');

            document.head.appendChild(viewportMeta);
            alert("click");
        }

        function turnOffDeviceViewport() {

            removeMetaIfExist();

            var viewportMeta = document.createElement('meta');
            viewportMeta.setAttribute('id', 'myMeta');
            viewportMeta.setAttribute('name', 'viewport');
            viewportMeta.setAttribute('content', 'width=980, user-scalable=yes');

            document.head.appendChild(viewportMeta);
            alert("click");
        }

        function removeMetaIfExist() {

            var metaElement = document.getElementById("myMeta");
            if (metaElement) document.head.removeChild(metaElement);
            alert("removed");
        }

        document.getElementById("turnOn").addEventListener("click", turnOnDeviceViewport, false);
        document.getElementById("turnOff").addEventListener("click", turnOffDeviceViewport, false);

    </script>
</body>

You can find details about viewport meta default values on Apple's developer website: Safari HTML Reference: Supported Meta Tags

EDIT: the default viewport value "width=980, user-scalable=yes" might not be the same for all devices and browsers so for a complete solution you will need to identify the browser you are running on and set the default value accordingly

Viewport meta tag remove bug

1 Answers