我正在使用媒體查詢的網站上工作。我可以在我的桌面瀏覽器中看到它們工作正常，但是當我導航到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