Setting the Viewport

For mobile compatibility a meta tag setting the Viewport must be included on every page.

What W3C say:

The Meta tag:

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

device-width -

The width=device-width part sets the width of the page to follow the screen-width of the device 
(which will vary depending on the device).

Intial-Scale -

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

iPads and large screen mobile dislays

Apparently this presented the web developer with problems when setting a viewport. iPads were known to do strange things if the viewport was not specified correctly. It was known as "Blowup", a term coined by Allen Pike in his article "Choosing a viewport for ipad sites".

Size Content to The Viewport

1. Do not use large fixed-width objects
2. Do not let the content rely on a particular viewport width to render well
3. Use CSS media-queries to to apply different styling depending the devices resolution.