CODEWITHSUNDEEP
javascriptcsshtmlcordovawindows-phone-8
Jack
Jack

Reputation: 193

How to dynamically change meta tag viewport after page load in windows phonegap application?

I want to dynamically change meta tag viewport in "index.html" in windows phonegap app on button click.

I am using

I want to change below meta tag

<meta id="viewport" name="viewport" content="width=device-width">

to 

<meta id="viewport" name="viewport" content="width=720">

I have already tried below URLs but nothing worked for windows phone.

how to set viewport so it is 380x800 or 800x380 depending on orientation?

Setting the Viewport to Scale to Fit Both Width and Height

Here I found link where it says it is not possible to change meta tag dynamically in winodws 8 OS

http://www.quirksmode.org/blog/archives/2011/06/dynamically_cha.html

Upvotes: 2

Views: 1944

Answers (2)

Rahul Nikam
Rahul Nikam

Reputation: 46

1st write simple function JavaScript for example I have written one function viewport() 

<html> 
<head>
    <script>
        function viewport(){
            var msViewportStyle = document.createElement("style");

            msViewportStyle.appendChild(
                document.createTextNode(
                    "@-ms-viewport{width:auto!important;zoom:1!important;}"
                )
            );

            msViewportStyle.appendChild(
                document.createTextNode(
                    "@-ms-viewport{height:auto!important}"
                )
            );

            document.getElementsByTagName("head[0].appendChild(msViewportStyle);
        }
    </script>
</head>
<body>
<button id="btnSubmit" onclick="viewport();">changeviewport</button>
</body>

more..[1]:Can I change the viewport meta tag in mobile safari on the fly?

Upvotes: 0

Alex Macra
Alex Macra

Reputation: 177

Try to detect the device/OS and change the meta tag accordingly http://www.sitepoint.com/detect-mobile-devices-jquery/

Upvotes: 0

Related Questions