view-port-example.html

<meta name="viewport" content="">

<!--
Within the content="" you can enter a load of comma delimited values, but we’re going to to focus on the fundamental ones for now.
-->

<!--
For example, if your mobile design is purposely laid out at 320px you can specify the viewport width:
-->

<meta name="viewport" content="width=320">

<!--

For flexible layouts it’s more practical to base your viewport width on the device in question, so to match your layout width to the device width you’d enter:
-->
<meta name="viewport" content="width=device-width">

<!--
To be extra certain that your layout will be displayed as you intended it you can also set the zoom level. This, for example:
-->
	
<meta name="viewport" content="initial-scale=1">

<!--
..will ensure that upon opening, your layout will be displayed properly at 1:1 scale. No zooming will be applied. You could even go further and prevent any zooming by the user:
-->
	
<meta name="viewport" content="maximum-scale=1">

<!--



Note: Before applying the maximum-scale parameter, consider whether you should really be preventing your users from zooming in. Can they read everything as well as possible?

-->


==PUT IT ALL TOGETHER==

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