Responsive Websites: Setting the CSS Viewport Meta Tag

The concept of the viewport

The CSS viewport refers to the part of the website, which is visible in the browser window. Therefore, the viewport is usually not the same size as the actual page. Mobile phones and other devices with smaller screens display pages in a virtual window or viewport.

The main issue is that narrower screens make the virtual viewport shrink to display all areas of a web page. Therefore, some websites do not look good on mobile devices.

Manipulating the viewport

You might assume that setting media queries is enough to fix this issue. However, they might not help if the virtual viewport does not match the specified breakpoints.

Therefore, you should consider setting the meta viewport tag for changing the size and scaling viewports.

• width=device-width part of the tag sets the width of the page to respond to the width of the screen.
• initial-scale=1.0 part of the tag sets the initial zoom level of the page.

This example uses the <meta> viewport tag:

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

These settings tell the browsers to display a website at the width of the screen of the device used. Therefore, if the screen width is 320px, the browser window will be the same.

Note: if your website is not created to be responsive, you should not use the viewport <meta> tag since it might create issues.

The CSS <meta> viewport tag accepts the following properties:

Mobile browsers manage the orientation changes differently. Mobile Safari simply zooms pages when the orientation changes to landscape. If you wish to keep settings of scale CSS, include the maximum-scale=1> value to prevent this behavior of mobile browsers.