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.

Links

• The new layout test page
• Don't build a Social Network
• Transition to new layout

External Sources

• Setting The Viewport - 🔗
• Using the viewport meta tag to control layout on mobile browsers - 🔗
• Choosing a viewport for ipad sites - 🔗 - Allen Pike
• How to not build a social network - 🔗 - Allen Pike - he suggests just don't do it!