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

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

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