简体   繁体   中英

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

  • Windows OS 8
  • phonegap 3.5
  • Device Nokia Lumia 1320 with windows 8 OS

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

尝试检测设备/操作系统并相应地更改元标记http://www.sitepoint.com/detect-mobile-devices-jquery/

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?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM