I'm working on a site that uses media queries. I can see in my desktop browser that they are working correctly, but when I navigate to the site on my WP8 device, no CSS is loaded. I've created a very simple HTML page to replicate the problem and show what solution I tried, but couldn't get to work.
Here is the entire code:
<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>
As you can see, it is very simple, there are 4 different "breakpoints" where the body's background color will change for different screen widths. After noticing how it doesn't work in IE on my WP8 device (a Lumia 822), I began googling the issue, and it seems to be a pretty well known issue. So the solution I found, and tried, came from here:
http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
It seems pretty straightforward, in that I add the five lines to the top of my 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}
And then add some JS to detect the IE Mobile browser from the UA. I have two issues with that:
First - When I alert my user agent string, I get the following from my WP8 device:
Mozilla/4.0 (compatible; MSIE 7.0;Windows Phone OS 7.0; Trident/3.1;IEMobile/7.0;NOKIA; Lumia 822
According to the article above, and this article, it should be IEMobile/10.0 instead. Any ideas on why mine is different? This appears to be the Windows Phone 7 user agent string. Why would my WP8 device show that?
Because of that difference, I had to change the JS to match 7.0 instead of 10, otherwise the if condition would never be met.
So, even still, with my code above, nothing happens, and my screen loads white on my WP8 device. Can anyone see what I'm doing wrong?
UPDATE:
It appears the JS was throwing an error:
Unexpected call to method or property access
So I found a solution for that, 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);
}
But, even now that the code executes successfully, my media queries are still ignored and I still see a white page load. Any ideas?
UPDATE 2:
I found another article, here (scroll to bottom), that says as of the GDR3 update (which I have, through the dev program):
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.
So, again I tried removing the Javascript, and adding only this to the top of my CSS:
@-ms-viewport{
width:device-width
}
But again, no CSS loads.
UPDATE 3:
It appears my User Agent may be correct. When I navigate to whatsmyuseragent.com on my WP8 device, it shows the correct UA. Maybe it has something to do with it being a local IIS 8.0 site when it reports the incorrect one? If that's the case am I not able to test my site locally from my Windows Phone? Has anyone ever done this?
