Windows Phone 8 Viewport issue

问题

iam developing a windows phone 8 + cordova project. in this i have a requirement to show some pages in landscape. In portrait the pages are looking fine and the size is correct. but when it comes to landscape the overall design is zoomed in.

Iam using this as my viewport style

@-ms-viewport
{
    width: device-width;
    width:350px;
    user-zoom:fixed;
    max-zoom:1;
    min-zoom:1;
}

and in index.html i used,

<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />

Can somebody suggest a fix for this ?

Thank you!

Edit: What i want is to zoom out the size of the page only in landscape mode!

回答1:

Fixed it by using the below code,

(function() {
    if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
        var msViewportStyle = document.createElement("style");
        msViewportStyle.appendChild(
            document.createTextNode("@-ms-viewport{width:auto !important}")
        );
        document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
    }
})();

来源：https://stackoverflow.com/questions/24007577/windows-phone-8-viewport-issue