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">
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).
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
- Do not use large fixed-width objects
- Do not let the content rely on a particular viewport width to render well
- Use CSS media-queries to to apply different styling depending the devices resolution.
- 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!
Setting the Viewport - January 2021