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

Question

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

There is a rule in the main stylesheet like this:

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

and for a specific title: (all sizes of my fonts are indicated in em, with the exception of the body, which defines everything)

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

When I see a large headline on my iphone, it looks quiet - what should I do to see it in a larger size? How can I apply the rule to all elements that “it’s just twice as large” (I tried to change the font size of the body, but this did not work).

What am I doing wrong and how to do it right?

Answer 1

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

So, twice as much: -webkit-text-size-adjust: 200%;

Answer 2

I found this piece of code that disables zooming in iphone:

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

I'm not sure if this is the exact solution (and it made everything too big) - but it's halfway ...

Answer 3

I would set body to 1em , and then headers, etc., respectively.