我正在一个使用媒体查询的网站上工作。我可以在我的桌面浏览器中看到它们工作正常，但是当我在 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>
如您所见，这很简单，
body 有 4 个不同的“断点”。的背景颜色会随着不同的屏幕宽度而改变。在注意到它在我的 WP8 设备(Lumia 822)上的 IE 中无法正常工作后，我开始在谷歌上搜索这个问题，这似乎是一个众所周知的问题。所以我找到并尝试过的解决方案来自这里: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 设备上加载为白色。谁能看到我做错了什么？
更新:
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 更新开始(我有，通过开发程序):
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 加载。
更新 3:
看来我的用户代理可能是正确的。当我在 WP8 设备上导航到 whatsmyuseragent.com 时，它会显示正确的 UA。当它报告不正确的站点时，可能与它是本地 IIS 8.0 站点有关？如果是这种情况，我是否无法从我的 Windows Phone 本地测试我的站点？有没有人这样做过？
最佳答案
看起来您现在已经使用 Bootstrap 对其进行了排序，但该站点可能出于某种原因进入 EmulateIE7(为了兼容性)。例如，如果您有 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />，Lumia 似乎也可以处理这个问题。 IE7 不支持标签，当然还有媒体查询。
关于windows-phone - WP8 上的 IE 10 忽略媒体查询？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20181819/