The viewport is the user's visible area of a web page. When we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.
Setting the Viewport
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. You should include the following <meta> viewport element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
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.
Size Content to the Viewport
Users are used to scroll websites vertically on both desktop and mobile devices - but not horizontally. So, if the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a poor user experience.
Some additional rules to follow: