我正在开发一个使用媒体查询的网站。我可以在桌面浏览器中看到它们正常工作，但是当我在 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 中不起作用后，我开始在谷歌上搜索这个问题，这似乎是一个众所周知的问题。所以我找到并尝试过的解决方案来自这里：
http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ 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；NOKIA；Lumia 822
根据上面的文章，并且本文 http://jonathanstark.com/blog/windows-phone-8-user-agent-string，应该改为 IEMobile/10.0。关于为什么我的不同有什么想法吗？这似乎是Windows Phone 7 用户代理字符串。为什么我的 WP8 设备会显示该信息？
由于这种差异，我必须更改 JS 以匹配 7.0 而不是 10，否则if条件永远不会得到满足。
因此，即使如此，使用上面的代码也没有任何反应，并且我的 WP8 设备上的屏幕加载为白色。谁能看到我做错了什么吗？
UPDATE:
JS 似乎抛出了一个错误：
意外调用方法或属性访问
所以我找到了一个解决方案，here https://stackoverflow.com/questions/436710/element-appendchild-chokes-in-ie:
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 http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html（滚动到底部），从 GDR3 更新开始（我通过开发程序获得了更新）：
好消息！微软已修复 WP8 Update 3 中的视口问题
（东德3）。
在 CSS @-ms-viewport 规则中使用设备宽度现在可以正确呈现
页面的设备宽度，而不是分辨率宽度。
因此，我再次尝试删除 Javascript，并仅将其添加到 CSS 顶部：
@-ms-viewport{
width:device-width
}
但同样，没有 CSS 加载。
更新3：
看来我的用户代理可能是正确的。当我在 WP8 设备上导航到 Whatsmyuseragent.com 时，它会显示正确的 UA。当它报告错误的站点时，可能与它是本地 IIS 8.0 站点有关？如果是这种情况，我是否无法从 Windows Phone 本地测试我的网站？有人这样做过吗？
