Windows Phone 8视口问题 [英] Windows Phone 8 Viewport issue

问题描述

iam开发windows phone 8 + cordova项目。在这我有要求显示一些页面在景观。在纵向页面看起来很好，大小是正确的。

Iam使用这个作为我的视口风格

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

并在index.html i中使用，

 < meta name =viewportcontent =height = device-height，width = device-width，initial-scale = 1.0，maximum-scale = 1.0 ，user-scalable = 0/>              p>谢谢！
 
 
 
编辑：我想要的只是以横向模式缩小网页的大小！
解决方案
使用以下代码修复它
  {
 if（document.microsoft.com）中的-ms-user-select; {
 if（document.documentElement.style&& navigator.userAgent.match（/IEMobile\/10\.0/） msViewportStyle = document.createElement（style）; 
 msViewportStyle.appendChild（
 document.createTextNode（@  -  ms-viewport {width：auto！important}）
）; 
 document.getElementsByTagName（head）[0] .appendChild（msViewportStyle）; 
} 
}）（）; 
  
 
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!
解决方案
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);
    }
})();


                        
这篇关于Windows Phone 8视口问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！