Trying to master RWD: why does iPhone render a page in full web mode/tiny print?

Mobile
1

I’m having a problem (very beginner-type problem).

I have a section of my site that is pretty basic HTML markup. Page widths are given as 100%; it is not a fixed width page. In a web browser the page narrows down as it should when the width of the browser is narrowed. But in an iPhone, the page presents as an ordinary wide-screen browser page! That is, wide layout with minuscule font.

What I don’t understand is, why does the font not present in an appropriate size for the device? Why don’t line lengths get shorter and wrap around appropriately for a narrow screen? I haven’t seen any advice anywhere to the effect that iPhone has to be forced to narrow down the page to make it readable without zooming in. I’m sure I’m missing something extremely basic here but I can’t figure out what it is.

Does anyone have any clues?

2

Hi,

Without a viewport meta tag in the head of the page mobile devices will assume a page is a standard 980px width page and shrink 980px of it to fit the mobile screen resulting in small text (even for fluid pages).

You need to add this meta tag into the head of the page to explicitly tell the mobile device not to shrink it.


<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
3

Thank you!!! It worked beautifully.

This is the kind of really silly basic error that can cause hours or days of frustration. You saved my sanity!

Bathrobe