Mobile device CSS

I am trying to experiment with alternate styles for mobile devices. I thought you could easily specify alternate styles by using @media all , @media screen and @media handheld OR <style media=“handheld”>, but it just doesnt seem to be working mobile deviance keep displaying based on the stylle for screen.


<style type=“text/css” media=“all”>
@media all{…}
@media screen{…}
@media handheld{…}

I’ve also tried:
<style type=“text/css” media=“all”>
…general rules
<style type=“text/css” media=“screen”>
…computer browsers only rules
<style type=“text/css” media=“handheld”>
…mobile device only rules and overrides

Even more odd is that regular browsers ignore the <style media=“handheld”> and @media handheld…?

Anyhow any help would be appreciated

( For the curious, I am testing on my friend’s iPhone 2G, and on my HTC HERO, both set to display mobile pages)

did a few tests based on that article… It works!!! On Android too!!! I think the key was content=“initial-scale=1.0”
Thanks Paul.

is that the same for Android as well?

The iphone scales to 980px if smaller unless you set the viewport meta tag.

<!-- stop iphone scaling the page by default-->
<meta name="viewport" content="width = 320" />

Here was the demo from my css quiz.

More info here:

I would have thought so too. In fact, for that I didn’t make anything BUT the html/body tags a fixed width… but it seems that without doing this setting container divs at 100% causes the site to scale as if I had a full monitor window that being scaled o fit in teh call phone screen, rather than a site that was either 320 or 480 px wide…

maybe I am just not using percentages right or i have margin running lose somewhere but I cant figure out WHERE.

for the curious, here is a sample wireframe ( please be warned that I think my hos is having server issues… so if you get a 404, please try again)

Good point AlexDawson, I did oversimplify things there considerably.

dresden_phoenix, it’s probably worth taking a look at some of the articles on this topic by A List Apart:

I think setting a fixed width for any divs is going to result in lot of heartache in the long run, such as the scaling issues you’ve described. Be careful with fixed (px) font sizes, too. Not sure if this answers the question, but to say that you should be using a fluid (and simple) layout where possible.

So there is nothing that covers all phones? great browser wars 2010.

So for now, since I am a total noob ( and I only have access iphone and Droid)… I will be happy.

I do have an additional question…

what is the calculated viewport size for droid/iPhone. I mean I know the CSS rules are being interpreted as my layout changes as expected, but the reduction in screen size , seem s more than necessary, as if it still trying to fit a 1000px into 320! This though I made the body and inner elements be blocks of 100% width ( which I am assuming would be like saying body{width:480px}. Incidentally, if instead of 100%I set the html, body, or the pagecontainer to a fixed width of 320px ,or even 480px, the page narrows but the size scaling doesn’t change; It just gives you an amount of white space on the right. what gives. is not 320px 320px?!

Actually, the information you’ve been given is wrong. The problem isn’t that @media handheld doesn’t work (it does), the problem is that many mobile devices refuse to follow a confirmed set of standards therefore some use screen, some use handheld, some use CSS3, some use screen + handheld + CSS3 (in varying orders of priority), some use screen + CSS3, some use screen + handheld and some use handheld + CSS3 (yes it is that bad). Whilst using CSS3 media queries will work on the mentioned platforms, spare a thought for the Nokia, Blackberry or other devices which don’t recognise such code and thereby your sites design will dump on them. :slight_smile:

thank you. you know i would have never thought of that!!!

Hi dresden_phoenix, check out the post I wrote earlier on using @media to optimize for mobile - it’s in regards to email, but the same concepts work on the web.

The skinny is, @media handheld { … } doesn’t seem to work, you need to use a condition like, @media only screen and (max-device-width: 480px) { … }

I’ve tested this on iPhone 3, Palm Pre and Android handsets, so hopefully it will do the trick for you, too. :slight_smile: