I'm currently working on a site which needs to be optimized for mobile viewing, I'm using CSS media queries to load mobile stylesheets which work great on all devices apart from the windows phones. The problem I'm having is that IE doesn't understand media queries and so the mobile IE browser, which I believe is a version of IE7, doesn't load my mobile stylesheet, it only loads the IE specific stylesheet.
Does anyone have any experience designing for the windows phone? Or just some ideas of another way to load a stylesheet based on screen size? I'd prefer not to use a browserdetect.js method or useragent string if possible. I'm looking for a way to write something like 'if IE & if screen size <= 480' but obviously without a media query.
Hey @Roxon - thanks for the reply, but I'm not sure though how using jquery mobile pertains to my question. The js I'm using runs fine on the windows phone, that isnt the issue, the problem is that it isn't loading the mobile stylesheet as IE doesn't recognize the media query. Is there a way of addressing that problem using jquery mobile? If there is then that would be ace!
@JohnnyB - I feel your pain dude. Yeah, mobile Windows devices don't support media queries, but they do support trusty IE Conditional Comments (yuck!). You won't be able to target screen sizes (at least to my knowledge), but you should be able to target mobile IE devices like this;
<!--[if IEMobile]> <p>hey this works!</p> <![endif]>
Using that technique, you can target "IEMobile" and even "IEMobile 7" like this;
Hey @aaronsilber - You the man! Thanks so much for the reply, that's exactly what I'm looking for! My site's gonna need some tweaking on the windows phone but at least now I can use a separate stylesheet devoted to windows mobile devices.
A buddy in the office just got the new verizon htc windows phone and the interface is great - but now realizing that I'm still not free of IE conditionals even on MOBILE has me thinking about destroying the phone...
I'm currently working on a site which needs to be optimized for mobile viewing, I'm using CSS media queries to load mobile stylesheets which work great on all devices apart from the windows phones. The problem I'm having is that IE doesn't understand media queries and so the mobile IE browser, which I believe is a version of IE7, doesn't load my mobile stylesheet, it only loads the IE specific stylesheet.
Does anyone have any experience designing for the windows phone? Or just some ideas of another way to load a stylesheet based on screen size? I'd prefer not to use a browserdetect.js method or useragent string if possible. I'm looking for a way to write something like 'if IE & if screen size <= 480' but obviously without a media query.
http://jquerymobile.com/
Using that technique, you can target "IEMobile" and even "IEMobile 7" like this;
Hope this helps! For something more hardcore you may want to consider a php mobile redirect. Here is a nice tool;
http://detectmobilebrowsers.mobi/
Get more information on targeting mobile Windows devices straight from the IE Mobile Team;
http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx
Thanks again for the help!
A buddy in the office just got the new verizon htc windows phone and the interface is great - but now realizing that I'm still not free of IE conditionals even on MOBILE has me thinking about destroying the phone...