Grow your CSS skills. Land your dream job.

Loading stylesheet for windows phone

  • # March 2, 2011 at 9:53 pm

    Hey.

    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:23 pm

    Not a solution – a suggestion. Don’t reinvent the wheel, as Chris would say.

    http://jquerymobile.com/

    # 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;

    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

    # 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!

    # March 3, 2011 at 12:20 pm

    Yup, no problemo brotha.

    # March 4, 2011 at 3:04 am

    I just got a win7 phone. Love it <(^^,)

    # March 4, 2011 at 11:50 am

    Haha yeah they’re pretty sweet, we have one for testing and I’ve gotta admit the interface is pretty slick! Love the sound effects too!

    # June 2, 2011 at 12:02 pm

    @aaronsilber! Thanks man!

    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…

    # June 2, 2011 at 12:34 pm

    If you destroy the phone, please film and post to YouTube. Thanks in advance.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".