Responsive Web Design – The Viewport
What is The Viewport?
A web page’s visible region to the user is called the viewport.
The viewport on a mobile phone is going to be smaller than on a computer screen, depending on the hardware.
Web pages were often constructed with a static layout and fixed size for computer displays, preceding the emergence of tablets and mobile phones.
Then, fixed size web pages became too big to suit the viewport when we started utilizing tablets and smartphones to browse the internet. The entire web page was scaled down to fit the screen by the browsers on those devices to address this.
This wasn’t flawless! But an expedient remedy.
Setting The Viewport
With HTML5, the <meta> tag provided a way for web designers to manipulate the viewport.
Every web page you create should have the following <meta> viewport element:
This provides guidance to the browser on how to manage the size and scaling of the page.
The width of the page is set to follow the device’s screen width (which varies based on the device) by using the width=device-width component.
When the browser loads the page for the first time, the initial zoom level is set by the initial-scale=1.0 component.
The following is an illustration of a webpage with and without the viewport meta tag:
Tip: To see the differences, click on either of the two links above if you are viewing this page on a phone or tablet.
Size Content to The Viewport
On desktop and mobile devices, users are accustomed to scrolling websites vertically—not horizontally!
Therefore, a bad user experience occurs when the user must zoom out or scroll horizontally to view the entire web page.
Several more guidelines to abide by:
- Do NOT use large fixed width elements – For instance, the viewport may scroll horizontally if an image is shown at a width greater than the viewport. Don’t forget to resize this content to match the viewport’s width.
- Do NOT let the content rely on a particular viewport width to render well – Content shouldn’t depend on a specific viewport width to render properly because screen sizes and width in CSS pixels differ significantly between devices.
- Use CSS media queries to apply different styling for small and large screens – When page elements have huge absolute CSS widths set, on a smaller device, the element will be too broad for the viewport. Use relative width settings, like width: 100%, as an alternative. Use of big absolute positioning values should also be done with caution. On small devices, it can result in the element falling outside the viewport.
