Why font sizes (and other elements) appear so small on mobile devices

Question

I am trying to create a special style sheet for mobile devices (for example - iphone).

I have in the main style sheet a rule like this one:

body
{
    font-family: arial,georgia,"times new roman",times,serif;
    font-size: 12px;
    line-height: 18px;
}

and for a certain header: (all of my fonts sizes are in em except for the body which defines all)

#header #PageTitle h1{
    font-size: 4.5em;
}

When I see the big header on my iphone it looks quiet small - what should I do to see it in a bigger size? How can I apply to all of the elements a rule to "just be twice as bigger" (I tried resizing the font-size of body but that didn't work).

What am I doing wrong and how should it be done correctly?

Answer 1

I found this piece of code which disables scaling in the iphone:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

I am not sure if this is the exact solution (and it made everything look too big) - but this is half way there...

Answer 2

-webkit-text-size-adjust: none | auto | <percentage>;

So, twice as big would be: -webkit-text-size-adjust: 200%;