Responsive Web Design - Viewport

What is the viewport?

The viewport (viewport) is the visible area of the web page to the user.

The viewport varies by device, and it will be smaller on mobile phones than on computer screens.

Before tablets and smartphones, web pages were only designed for computer screens, and static designs with fixed sizes were very common.

Then, when we started to use the internet on tablets and smartphones, fixed-size web pages were too large to fit the viewport. To solve this problem, browsers on these devices would shrink the entire web page proportionally to fit the screen size.

This is not perfect! It is more of a quick fix.

set the viewport

HTML5 introduces a method that allows web designers to <meta> tag to control the viewport.

You should include the following <meta> Viewport element:

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

It provides instructions to the browser on how to control the page size and zoom ratio.

width=device-width Part of the page sets the width to follow the screen width of the device (depending on the device).

When the browser first loads the page,initial-scale=1.0 Part of the settings for the initial zoom level.

Below are examples of web pages without viewport meta tags, and web pages with viewport meta tags:

Tip:If you are browsing this page on a mobile phone or tablet, you can click on the two links below to view the differences.



Without viewport meta tag


With viewport meta tag

Adjust the content to the size of the viewport

Users are accustomed to vertically scrolling websites on desktops and mobile devices, rather than horizontally scrolling!

Therefore, if forcing users to horizontally scroll or zoom out to view the entire web page, it will result in a poor user experience.

Some additional rules need to be followed:

1. Do not use larger fixed width elements - For example, if the width of an image is greater than the width of the viewport, it may cause horizontal scrolling of the viewport. Be sure to adjust this content to fit the width of the viewport.

2. Do not let content depend on a specific viewport width to present good effects - Due to the great variation in screen size and width in devices measured in CSS pixels, content should not depend on a specific viewport width to present good effects.

3. Use CSS media queries to apply different styles for small and large screens Setting a larger CSS absolute width for page elements will cause the element to be too wide for smaller devices' viewport. Instead, consider using relative width values, such as width: 100%. Also, be cautious when using large absolute positioning values, which may cause elements to fall outside the viewport of small devices.