我正在使用媒体查询的网站上工作。我可以在我的桌面浏览器中看到它们工作正常，但是当我导航到WP8设备上的网站时，没有加载CSS。我创建了一个非常简单的HTML页面来复制问题并显示我尝试过的解决方案，但无法工作。WP8上的IE 10忽略媒体查询？
这里是整个代码：
<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 (compatible; MSIE 7.0;Windows Phone OS 7.0; Trident/3.1;IEMobile/7.0;NOKIA; Lumia 822
根据上面的文章，并this article，它应该是IEMobile /10.0。关于我为什么不同的任何想法？这似乎是Windows Phone 7用户代理字符串的。为什么我的WP8设备会显示？
由于这种差异，我不得不改变JS来匹配7.0而不是10，否则if条件永远不会被满足。
所以，即使如此，使用上面的代码，没有任何反应，并且我的屏幕在我的WP8设备上加载了白色。任何人都可以看到我做错了什么？
UPDATE：
它出现在JS被扔了一个错误：
Unexpected call to method or property access
所以我找到了一个解决方案，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更新的（我有，通过dev的程序）：
Great news! Microsoft have fixed the viewport issue in WP8 Update 3 (GDR3).
Using device-width in a CSS @-ms-viewport rule now correctly renders pages at the device-width, instead of the resolution width.
所以，我再次试图消除的Javascript，只有这增加了我的CSS的顶部：
@-ms-viewport{
width:device-width
}
但同样，没有CSS LO广告。
更新3：
它出现在我的用户代理可能是正确的。当我导航到我的WP8设备上的whatsmyuseragent.com时，它会显示正确的UA。当它报告错误的时候，它可能与本地IIS 8.0站点有关？如果是这种情况，我无法从我的Windows Phone本地测试我的网站？有没有人曾经这样做过？
我刚刚检查了我的WP8 IE发送的UserAgent，它包含'Windows Phone 8.0'和'IEMobile/10.0'。 – MarcinJuraszek
是的。我仍然难以接受。我找不到有关WP8设备返回WP7 UA字符串的任何信息，但在我的Lumia 822上，当我警告'navigator.userAgent'时，我总是从我的帖子中获取WP7字符串？有任何想法吗？ – lhan
看起来像如果我去whatsmyuseragent.com它显示正确？可能与本地IIS 8.0站点上的测试有关？ – lhan