The viewport is a website’s visible area on the screen of the user. This dimension varies with each device, so the viewport will be smaller on a tablet than a computer screen, and smaller again on a mobile phone. In the early days of website development, before we had internet on our phones, websites were designed only for computer screens, with fixed widths and static designs. As browsing the internet on mobile devices became more widespread, websites adapted to the need to fit many screen sizes, and websites began to ‘scale down’ to fit the entire contents of the page to fit within the viewport. This ‘quick fix’ was only the start, now modern browsers allow for code that to develop websites commonly known as, a responsive wesite.
Setting The Viewport
When HTML5 arrived we introduced a solution to let web developers take control of the viewport, using the <meta> tag.
If you’re developing a responsive website, you should always include the following <meta> viewport element:
This <meta> viewport element instructs the browser instructions how to control the page’s dimensions and scaling.
The width=device-width part specifies that the width of the page will be the screen-width of the device, which varies by the size of the device the website is being viewed on.
When the page is first loaded by the browser, the initial-scale=1.0 part sets the initial zoom level.
Sizing Your Content to The Viewport
In modern UI, users are fairly used to scrolling websites vertically (hello, Facebook newsfeed), but it’s not common to scroll horizontally. If the user is forced to zoom out to view the content, or if they need to scroll horizontally unnaturally, to view hidden content, this is regarded as a poor user experience.
Stick to these helpful rules to design better responsive websites:
1. Stop using large fixed-width elements – if an image or div’s width is set wider than the viewport, the user will have to scroll horizontally. Try using percentage widths like width: 100% to fit the content within the viewport.
2. Never apply a specific viewport width to render a whole site as there are many sized devices. Since screen dimensions and width in CSS pixels vary widely between devices, don’t make your content rely on a specific device’s dimensions to render well.
3. Try CSS media queries to apply alternative styling for different sized viewports – Never use large absolute position values and be careful with large CSS widths for page elements. Try using percentage widths to fit content to various viewport sizes automatically.
