Я работаю над сайтом, который использует медиа-запросы. Я вижу в своем браузере рабочего стола, что они работают правильно, но когда я перехожу к сайту на своем WP8-устройстве, загрузка CSS не выполняется. Я создал очень простую HTML-страницу, чтобы воспроизвести проблему и показать, какое решение я попробовал, но не мог работать.IE 10 на WP8 игнорирует медиа-запросы?
Вот весь код:
<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 «s цвет фона будет меняться для различной ширины экрана. Увидев, как он не работает в IE на моем WP8-устройстве (Lumia 822), я начал искать эту проблему, и это кажется довольно известной проблемой. Таким образом, решение, которое я нашел, и попробовал, пришли сюда:
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 для обнаружения браузера IE Mobile из UA. У меня есть две проблемы с этим:
First - Когда я 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 user agent. Почему мое устройство 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);
}
Но даже теперь, код выполняется успешно, мои мультимедийные запросы по-прежнему игнорируются, и я по-прежнему вижу белую загрузку страницы. Есть идеи?
UPDATE 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 Ио Объявления.
UPDATE 3:
Оказывается, мой User Agent может быть правильным. Когда я перехожу к whatsmyuseragent.com на моем WP8-устройстве, он показывает правильный UA. Может быть, это связано с тем, что это локальный сайт IIS 8.0, когда он сообщает о некорректном? Если это так, я не могу проверить свой сайт локально с моего Windows Phone? Кто-нибудь когда-либо делал это?
Я только что проверил UserAgent, отправив мой WP8 IE, и он содержит как «Windows Phone 8.0», так и «IEMobile/10.0». – MarcinJuraszek
Да. Я все еще в тупике. Я не могу найти что-либо в Интернете о WP8-устройстве, возвращающем строку WP7 UA, но на моем Lumia 822, когда я предупреждаю «navigator.userAgent», я всегда получаю строку WP7 сверху в своем сообщении? Есть идеи? – lhan
Похоже, если я пойду на whatsmyuseragent.com, он будет показан правильно? Может быть, это связано с тестированием на локальном сайте IIS 8.0? – lhan