GID Master

Sign in

Viewport meta tag to control responsive website

Viewport defines the area of the screen that the browser can render content to. It’s the size of the window you’re viewing your website regardless the device screen size, that’s why viewport meta tag is considered the first step to to control a responsive website.

On desktops that size is easy to see because it’s just the size of your browser. It means the full size of the screen even when you shrink your browser. In other words, the portion of that browser that you’re viewing the website is essentially the viewport.

On the other hand, it’s not so obvious for mobile devices.
Imagine a screen of 320px wide. But it doesn’t mean that your viewport on the browser is the same size, even though it seems that way.

Sounds complicated, eh ?

Viewport Default Behaviour

Developers use viewport meta tag to let the browser know that we want to control it. It gives them the power to control how render pages depending on the screen resolution.

The browser assumes the default width case developers don’t define the viewport meta tag. The standard width is usually around 980px. Browser renders the application as if it were on a desktop screen even loading it from a mobile device.

Imagine scaling down that content to fit it into a phone that’s only 360px wide. The page scales to less than half to be able to fit it in, then your application will look crap and users will have to pinch zoom your pages to read the content.

The browser tries to make the content look better by doing something called font boosting, this process happens even if your application contains small sections.

Wait a minute !
Seems like the developers don’t know what they are doing.
That’s why the browser takes over and try to fix it. But how ?
By taking the website primary font size and scaling it up.

Page will look not bad if developers created consistent pages using the same typography across all the sections. Otherwise, page gets messed up having some large and readably fonts and others really small and hard to see.

It is clear when you look at the above images, the subtitle below trending books looks a lot smaller than the other fonts, right ?
It is visible how the browser tries to fit all your text using the primary font which is 16px as reference.

Viewport Meta Tag

As we saw previously, the browser’s viewport is the area of the window in which web content can be seen. It is the rectangle area where users see the page content, that’s why viewport becomes the first step to create responsive websites.

Usually mobile devices render pages in a virtual window or viewport. The viewport is wider than the the regular screen, browser renders the page and scale the result down to fit everything at once.

Defining the viewport meta tag, the browser knows how to render the entire page based on the correct mobile viewport screen. Add the following tag into your HTML page, after that you can already see the difference from the previous images.

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

The viewport meta tag can define the content width of the page, it gives instructions to the browser on how to control the page’s dimension and scaling.

You can set this width value as a fixed pixel, but we highly recommend to use device-width, by doing it, browser gets the width of the screen in CSS pixel at a scale of 100%.

The initial scale controls the zoom level when the browser loads the page for the first time, you can also define maximum and minimum scale to allow users to zoom the page.

Scale keeps the relationship of 1:1, when users change the orientation, the browser scales the page down instead of reflowing the entire application again.

Website Rendering Process

Imagine a device with dimension of 640px to load a page content.
The browser probably renders the page with a virtual viewport of 980px and then scale down to the original size. Keep in mind that the page resets the font-size to be able to fit the content on the screen.

It means that mobile always renders pages at desktop screen size, and then scales down to mobile dimensions considering all your defined breakpoints.

Conclusion

If you are developing an application to work across all devices, you definitely have to add the viewport meta tag as the first step to develop a responsive web page.

However, keep in mind that is not the only magic code that will make you page fully responsive.

Web Architect — Full Stack Developer — Mobile Web Specialist