I am working on a site that uses media queries. I see in my desktop browser that they work correctly, but when I go to the site on my WP8 device, CSS loading does not work. I created a very simple HTML page to reproduce the problem and show which solution I tried, but could not work.
Here is the whole 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, this is very simple, there are 4 different “breakpoints” where the background color of the body changes for different screen widths. Seeing how it does not work in IE on my WP8 device (Lumia 822), I started looking for this problem, and this seems like a pretty well-known problem. So, the solution that I found and tried came from here:
http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
This looks pretty simple as I add 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}
Then add JS to discover the IE Mobile browser from UA. I have two questions:
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
In accordance with the above article and this article , IEMobile / 10.0 should be used instead. Any ideas on why my other? This seems to be a Windows Phone 7 user agent string. Why will my WP8 device show this?
Because of this difference, I had to change JS to 7.0 instead of 10, otherwise the if condition will never be met.
So, even 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 seems that JS is throwing an error:
Unexpected method call or property access
So, I found a solution for this 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, when the code runs 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 down) that talks about updating GDR3 (which I have through dev programs):
Great news! Microsoft fixed the viewing issue in WP8 Update 3 (GDR3).
Using device width in the CSS rule @ -ms-viewport now correctly displays pages at the width of the device, rather than the width of the resolution.
So, I tried again to remove Javascript and only added this to the top of my CSS:
@-ms-viewport{ width:device-width }
But then again, CSS loading fails.
UPDATE 3:
It seems my User Agent may be right. When I go to whatsmyuseragent.com on my WP8 device, it shows the correct UA. Maybe this is due to the fact that this is the local IIS 8.0 site when it reports an incorrect one? If this is the case, I can’t check my site locally from my Windows Phone? Has anyone ever done this?