Viewport meta tag

The Viewport is one of the most representative tags of the mobile web, which allows us to configure how the mobile web browser should interpret a page.

Initially created by Apple to define various guidelines for how the iPhone should render a web document, the viewport is a META tag that has now become a standard. Most mobile devices support it in the widest range of operating systems, which makes it an essential component for any page that is designed to also be viewed on mobile devices.

The viewport is one of those concepts that costs more to explain than to understand, or at least it seems to me. I may not be the most suitable interlocutor to talk about this META tag either, but someone has to deal with it in the detail it deserves in the . So let’s get to work!

Basically, it is used to define what screen area is available when rendering a document, what is the level of scaling that the user can perform, as well as if the browser should display it with some initial zoom. All this is indicated through various parameters in the META tag itself, as we will see in this article.

Understand the viewport

Let’s start by understanding what the viewport is. And as we will see, it is a very simple concept, since it corresponds to the area that is available on the browser screen.

Although the viewport is typical of mobile browsers and makes sense precisely when we are thinking about these devices with small screens, we can first understand it in the context of a desktop browser.

The viewport in a browser on any computer with traditional systems is equal to the area of ​​the window, or rather, to the area available to render the web document (that is, we subtract all the browser interface, such as buttons, address bar, menu bar, scroll bars, etc.) In other words, it is the useful area where the web page will be displayed.

Easy? I hope so. But now let’s think mobile. You may know that when viewing pages on a device, the contents are often scaled down to fit the small space of the browser window. That is, to show the entire page in the available space of the device screen, the web is scaled, so that everything is seen in a tiny way.

This is what the current .com site would look like which is optimized for desktop computers and does not have any viewport tags defined.

Well, when we are talking about mobile devices, the viewport does not correspond to the real size of the screen in pixels, but to the space that the screen is emulating that it has. For example, on an iPhone, although the vertical screen has dimensions of 320 pixels, the device is actually emulating having 980 pixels. This causes certain web pages (optimized for desktop browsers) to fit on a 320-pixel screen, because Safari for iOS is actually emulating having a 980-pixel space.

Well, the viewport in these cases is the space that the device emulates having, not the real resolution in pixels that the screen has. What is interesting in this case is that developers are capable of altering the viewport that is configured in the browser, something that is totally necessary if we want our page to look correctly on mobile devices.

This image has the same photo that is displayed on the screen of an iPhone. Suppose the photo is 320 pixels wide. On the right hand side we would have the actual size photo, which is what it would look like if we had a viewport set to 320 pixels wide. But when viewed on an iPhone with a viewport set to 980 pixels wide, the image will appear significantly smaller.

Configuring the Viewport tag

When Safari on iOS renders a web document, it scales the content so that pages designed for desktop systems look more or less good on a mobile phone. As you could see in the first image of this article, when viewing the .com website, the contents appeared very small and this forces us to zoom in to read them. However, we can configure the viewport to tell Safari, or any other mobile browser, what to do in this regard.

Note: We insist that when we talk about Safari, we really mean any mobile browser, be it iOS, Android, Blackberry, etc., since the viewport tag is currently supported by the widest range of mobile systems . Actually, we say Safari only because it was the first to use it.

It is highly recommended that the viewport tag be altered to get your browser to behave the way you want it to, especially for pages we are designing to look good on small screens. For this we have the following parameters in the META tag.

• Width: virtual (emulated) width of the screen or width of the viewport.
• Height: virtual height of the screen or width of the viewport.
• initial-scale: The initial scale of the document.
• Minimum-scale: The minimum scale that can be put on the document.
• Maximum-scale: The maximum scale configurable in the document.
• User-scalable: Whether or not the user is allowed to zoom.

As you can see, the META viewport not only indicates the dimensions of the emulated screen, but also the zoom level that may be initially configured and the zoom level that would be allowed.

Note: remember that the user can zoom in on the web page, with the typical gesture on the touch screen. By zooming, you would not really be changing the viewport, but rather the scale at which the document is displayed.

In this third image we have a viewport of 320 pixels, however we have defined an “initial-scale” of 1.5, so the image that was actually 320 pixels wide does not fit on the iPhone screen.

An example of a viewport tag would be the following:

The width and height of the viewport should be more or less clear, as they simply refer to the fixed dimensions of the initial viewport. However, these two measures are not usually indicated, being more common to define only the width with the value “device-width”, which is a measure that refers to the width of the device screen.

So with width=device-width we get the viewport to be equal to the actual width of the device screen, so it won’t try to emulate a larger screen than it actually is and we’ll see the actual pixels.

With initial-scale=1 we achieve that the document is not zoomed in. It is very simple, the content of the web will not be transformed, nor will it be enlarged, nor will it become smaller.

With user-scalable=no we achieve that the user cannot zoom in on the page, so the measures that we have defined when building the web will always be maintained.

Note: deactivating the zoom with user-scalable=does not make it easier for us to always have the scale as we have defined in the META viewport tag, which can simplify our lives when defining how a website should be seen. However, we will be limiting the possibility of the user zooming in to make something larger or smaller. For all this, it is worth weighing up what we want to allow and if by really defining a maximum-scale and minimum-scale, we are properly limiting the use of our website.

conclusion

The viewport requires a detailed study and some practice to fully understand its possibilities and the way to configure it, in order to optimize the way our website should be seen on mobile devices. As it has been possible to verify, there are many and diverse possibilities to explore.

We hope that in this article we have cleared your doubts, however, we could possibly be talking about the viewport for a long time to solve all the needs of developers and the doubts of those people who are designing websites that are optimized for mobile phones or adaptable to all devices. ().

For further reference, you can refer to the “Configuring Viewport” web page of the .