Loading stylesheet for windows phone
# March 2, 2011 at 9:53 pm
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.# March 2, 2011 at 11:37 pm
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!# March 3, 2011 at 1:47 am
@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;
Hope this helps! For something more hardcore you may want to consider a php mobile redirect. Here is a nice tool;
Get more information on targeting mobile Windows devices straight from the IE Mobile Team;# March 3, 2011 at 10:48 am
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.
Thanks again for the help!
You must be logged in to reply to this topic.