How to Change the Viewport Meta Tag in Mobile Safari on the Fly

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

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">');

Dynamically changing the meta viewport attribute in Mobile Safari

According https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html, you should set the viewport with the right string width = 320:

mvp.setAttribute('content','width = 320');

Mobile Safari Viewport - Preventing Horizontal Scrolling?

Is it possible that I've got some page element pushing the content out?

Yes, that is indeed the case. The viewport setting only defines the visible viewport area but does not deal with turning off sideway panning.

So, in order to avoid this from happening, set an overflow:hidden on the element that contains your content, or else, avoid elements from overflowing.

NB: other mobile browsers also support the viewport meta tag since a while, so you'll want to test in those as well.

Viewport meta tag remove bug

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

How to Change the Viewport Meta Tag in Mobile Safari on the Fly

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

Dynamically changing the meta viewport attribute in Mobile Safari

Mobile Safari Viewport - Preventing Horizontal Scrolling?

Viewport meta tag remove bug

Related Topics

Leave a reply