Windows phone WP8上的IE 10忽略媒体查询？_Windows Phone_Media Queries_User Agent_Viewport

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

windows-phone

Windows phone WP8上的IE 10忽略媒体查询？,windows-phone,media-queries,user-agent,viewport,Windows Phone,Media Queries,User Agent,Viewport,我在一个使用媒体查询的网站上工作。我可以在我的桌面浏览器中看到它们工作正常，但是当我在WP8设备上导航到该站点时，没有加载CSS。我已经创建了一个非常简单的HTML页面来复制这个问题，并显示我尝试了什么解决方案，但无法开始工作以下是完整的代码： <html> <head> <title>WP8 Test</title> <meta name="viewport" content="width=dev

我在一个使用媒体查询的网站上工作。我可以在我的桌面浏览器中看到它们工作正常，但是当我在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>

然后添加一些JS从UA检测IE移动浏览器。我对此有两个问题：

首先-当我

alert

我的用户代理字符串时，我从我的WP8设备获得以下信息：

Mozilla/4.0（兼容；MSIE 7.0；Windows Phone操作系统7.0；Trident/3.1；IEMobile/7.0；诺基亚；Lumia 822

根据上面的文章，应该是IEMobile/10.0。你知道为什么我的不一样吗？这似乎是Windows Phone 7用户代理字符串。为什么我的WP8设备会显示这一点

由于这种差异，我不得不将JS更改为匹配7.0而不是10，否则将永远无法满足

if

条件

所以，即使是这样，我上面的代码也没有发生任何事情，我的屏幕在我的WP8设备上显示为白色。有人能看到我做错了什么吗

更新：

JS似乎抛出了一个错误：

对方法或属性访问的意外调用

所以我找到了解决办法：

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

更新2:

我发现了另一篇文章（滚动到底部），上面说从GDR3更新开始（我已经通过开发程序进行了更新）：

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

在CSS@-ms视口规则中使用设备宽度现在可以正确渲染页面以设备宽度而不是分辨率宽度显示

因此，我再次尝试删除Javascript，并仅将其添加到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}

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

但同样，没有CSS加载

更新3:

似乎我的用户代理可能是正确的。当我在WP8设备上导航到whatsmyuseragent.com时，它会显示正确的UA。可能是因为它报告了错误的IIS 8.0本地站点？如果是这种情况，我是否无法从Windows Phone本地测试我的站点？有人这样做过吗？

看起来很正常ike您现在已经使用bootstrap对其进行了排序，但是该站点可能会开始模拟E7（为了兼容性）出于某种原因。如果你有

标签，Lumia似乎也会注意到这一点，当然IE7不支持媒体查询。

我刚刚检查了我的WP8 IE发送的UserAgent，它包含

Windows Phone 8.0

和

IEMobile/10.0

。是的。我仍然对此感到困惑。我在网上找不到任何东西关于WP8设备返回WP7 UA字符串，但在我的Lumia 822上，当我提醒navigator.userAgent时，我总是在我的帖子中从上面得到WP7字符串？有什么想法吗？看起来如果我去MyUserAgent.com它正确显示了什么？可能与在本地IIS 8.0网站上测试有关吗？我对诺基亚Lumia 820也有同样的问题。我有viewport meta、@-ms viewport和javascript hack…但页面仍然显示没有响应，媒体查询也没有应用。你找到解决方案了吗？我决定这一定与在本地IIS上测试网站有关。我现在没法说，因为我的手机已经在Windows phone 8.1上用IE 11更新了。我也是我现在使用bootstrap来代替我自己的媒体查询，从那以后我就没有任何问题了。我真希望搜索引擎能有所改进——我花了不少于4个小时的时间来回答这个问题，以及你的答案，通过大量类似但不相同的问题。虚拟啤酒为你准备。

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