Question

我正在使用媒体查询的网站上工作。我可以在桌面浏览器中看到它们正常工作，但是当我导航到WP8设备上的站点时，没有加载CSS。我已经创建了一个非常简单的HTML页面来复制问题并显示我尝试过的解决方案，但无法开始工作。

以下是整个代码：

<html>
    <head>
        <title>WP8 Test</title>

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

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <style type="text/css">

            @-webkit-viewport{width:device-width}
            @-moz-viewport{width:device-width}
            @-ms-viewport{width:device-width}
            @-o-viewport{width:device-width}
            @viewport{width:device-width}

            @media screen and (min-width: 1024px) {
                body {
                    background-color: red;
                }
            }

            @media screen and (min-width: 768px) and (max-width: 1024px) {
                body {
                    background-color: blue;
                }
            }

            @media screen and (min-width: 480px) and (max-width: 768px) {
                body {
                    background-color: green;
                }
            }

            @media screen and (max-width: 480px) {
                body {
                    background-color: yellow;
                }
            }

        </style>

        <script type="text/javascript">

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

        </script>

    </head>
    <body>
        text
    </body>
</html>

如您所见，它非常简单，有4个不同的“断点”，body的背景颜色会因不同的屏幕宽度而改变。在我的WP8设备（Lumia 822）上注意到它在IE中不起作用后，我开始在Google上搜索问题，这似乎是一个众所周知的问题。所以我找到并尝试过的解决方案来自这里：

http://timkadlec.com/2013/01/windows-phone-8-and-device-width/

看起来非常简单，因为我将五行添加到我的CSS顶部：

@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}

然后添加一些JS来检测来自UA的IE Mobile浏览器。我有两个问题：

首先 - 当我alert我的用户代理字符串时，我从我的WP8设备获得以下内容：

Mozilla / 4.0（兼容; MSIE 7.0; Windows Phone OS 7.0; Trident / 3.1; IEMobile / 7.0;诺基亚; Lumia 822

根据上面的文章和this article，它应该是IEMobile / 10.0。关于为什么我的不同的任何想法？这似乎是 Windows Phone 7用户代理字符串。为什么我的WP8设备会显示出来？

由于存在这种差异，我不得不将JS更改为匹配7.0而不是10，否则永远不会满足if条件。

所以，即便如此，使用上面的代码，没有任何反应，我的屏幕在我的WP8设备上加载白色。谁能看到我做错了什么？

更新

看来JS正在抛出一个错误：

意外调用方法或属性访问

所以我找到了一个解决方案，here：

if (navigator.userAgent.match(/IEMobile\/7\.0/)) { 
   var s = document.createElement("style");
   s.setAttribute('type', 'text/css');
   var cssText = "@-ms-viewport{width:auto!important}";
   if(s.styleSheet) { // IE does it this way
    s.styleSheet.cssText = cssText
   } else { // everyone else does it this way
    s.appendChild(document.createTextNode(cssText));
   }

document.getElementsByTagName("head")[0].appendChild(s);
}

但是，即使现在代码执行成功，我的媒体查询仍然被忽略，我仍然看到白页加载。有什么想法吗？

更新2：

我发现了另一篇文章here（滚动到底部），其中说明了GDR3更新（我通过开发计划）：

好消息！ Microsoft已修复WP8 Update 3中的视口问题   （GDR3）。

现在可以正确地在CSS @ -ms-viewport规则中使用device-width进行正确渲染   设备宽度的页面，而不是分辨率宽度。

所以，我再次尝试删除Javascript，并将其添加到我的CSS顶部：

@-ms-viewport{
   width:device-width
}

但同样，没有CSS加载。

更新3：

看来我的用户代理可能是正确的。当我在WP8设备上导航到whatsmyuseragent.com时，它会显示正确的UA。也许它与它是一个本地IIS 8.0网站有关，当它报告不正确的一个？如果是这样的话，我无法从Windows Phone本地测试我的网站？有没有人这样做过？

Answer 1

看起来您现在已经使用bootstrap对其进行了排序，但由于某种原因，该网站可能会被启动到EmulateIE7（兼容性）。例如，如果你有<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />标签，Lumia似乎也会接受这一点，当然IE7不支持媒体查询。

WP8上的IE 10忽略了媒体查询？

1 个答案: