I'm not sure if I've blogged this before, but I've been using this method for using CSS files in Windows Mobile IE. My method:
1) Create the link for the handheld style sheet using media="handheld".
<link rel="stylesheet" type="text/css" media="handheld" href="css/handheld.css" />
2) Hide your default big-browser stylesheet using media="Screen" (with the capital S). This hack hides to Windows Mobile IE for some reason.
<link rel="stylesheet" type="text/css" media="Screen" href="css/master.css" />
This method works for me. Good handhelds and phones will recognize media="handheld", but not sure all do. I'm always looking for other suggestions to get decent and readable results in handhelds, but only test in PPC and my Motorola phone. I have not used phone emulators in a while, but I assume they're still out there.
Comments
05/14/06 @ 10:58
Thanks for this tip, Michael. I'm in the throes of sorting out CSS for handhelds for an important client, and knowing this will make my life much easier.
There's a good chance you already know this, but Opera (the desktop version) has a handheld emulation mode where it renders the same way as the mobile version of Opera. You can access it by going to the "View" menu and selecting "Small screen". With Opera having a strong presence on the handheld platform this is a useful way to test stuff. In this mode it correctly honours the "handheld" media type while ignoring the "screen" type; this also works with your upper case "S" technique.
08/12/06 @ 06:49
This method will make it easier to see whats going on with my site, whilst i'm not at my main computer :D
10/14/06 @ 15:13
Thanks for the tip, it's a really good novel to know that i don't have to create a script to detect pocket-pcs...
11/09/06 @ 10:49
Thanks!
Very handy
06/15/07 @ 09:58
Haha, that's a great trick.
I used JavaScript to do the same: http://johannburkard.de/blablog/www/mobile/2007/06/02/Linking-CSS-for-ha...
04/10/08 @ 15:25
this is helpful but do all or most css tags work with windows mobile.
06/11/08 @ 12:58
Hi,
We're having a problem with that, the thing is that it works on Windows Mobile 5 but not 6.
Does anyone know why?
I don't know if the problem is having the "Screen" first, and then the "HandHeld". THe problem is that WM6 doesn't load any style at all... :@
THANK YOU very much.
06/11/08 @ 14:01
Well, this was a hack for 5. You'll have to find other methods for 6.
09/23/08 @ 08:07
This is weird: the hack works fine on one site but not on another. I've been over and over it and there are no differences, except the latter site is powered by Wordpress. (I'm using WinMobile 6.)
11/21/08 @ 05:59
This hack works fine for me on Windows Mobile 6. Depressing that I needed it, you would have thought MS would fix it between releases.
Ho hum.
Post new comment