Viewport tag. Meta viewport. How does he work? Viewport meta tag attributes

Last updated: 10/31/2015

Obviously, mobile screen sizes pose one of the most important challenges when creating a website for mobile devices. In this case, the Viewport tag will help us avoid this problem. Take, for example, the following markup:

This is a regular site

By launching this page in the Opera Mobile emulator, we get the following picture:

Using zoom, the user can finally see what is written there. However, this is not very convenient. At the same time, the site page has a lot of empty space, which is not very nice.

Why is this happening? The fact is that each mobile browser sets some initial dimensions for the page and then tries to adapt it to the screen size of the current mobile device.

The entire visible area on the browser screen is described by the concept Viewport. Essentially, a viewport represents the area into which a web browser tries to “push” a web page. For example, the Safari browser on the iPhone and iPod defines a default viewport width of 980 pixels. Then, having received the page from the server and entered it into the viewport with a width of 980 pixels, the browser compresses it to the size of the mobile device. For example, if the width of the smartphone screen is 320 pixels, then the page will then be compressed to this size. And a scaling factor of 320/980 will be applied to all page elements.

Why is 980 pixels used in this case, and not, say, the actual screen size? The thing is that by default the browser believes that every web page is intended for desktops. And the usual width of a desktop site can be considered 980 pixels.

In this case, each browser has its own viewport area width, not necessarily 980 pixels, for example, IE supports 1024 pixels as the initial width. But the overall picture will be the same.

To avoid this not very pleasant picture, you should use the viewport meta tag. The use of this meta tag will largely make it clear to the browser that it is not dealing with a desktop page, but one intended also for mobile devices.

The general declaration of a meta tag is as follows:

In the content attribute of the meta tag we can define the following parameters:

Now let's modify the previous example web page by using a meta tag:

This is a regular site

The web page definitely looks better by using the viewport meta tag. By using the width=device-width parameter, we tell the web browser that the initial width of the viewport area should not be 980 pixels or some other number, but the actual width of the device screen. So then the web browser won't do any scaling since our viewport width and width are the same.

We can also use other options, such as preventing the user from scaling the page dimensions:

Let's create a simple page with minimal markup:

Hello world!

Now let's open this page on a mobile device. Having opened it, we will see that our page will be displayed something like this:

As you can see, the text is too small to read, there is a lot of empty space, and in order to read this text, we need to zoom in on it.

Why is this happening?

The problem with mobile browsers

When comparing mobile and desktop browsers, the most obvious difference is Screen size. Mobile browsers, by default, display sites designed for regular desktop browsers much worse than they could: either by reducing the scale, making text and other content too small and unreadable (as in our version), or by displaying only a small part of the site that fits on the screen.

If you think about it logically, this makes sense: a mobile browser sees a page and assumes that it was created for the desktop version of the browser, which is true for the vast majority of sites. Based on this, this browser sets the page width to 980px (Safari iPhone) and tries to optimally fit it on the smartphone screen, displaying it at the most reduced scale. Typically, the width of sites is approximately this, so when you open an average web page on a mobile device, it will stretch to its full width, but 2-3 times smaller than its original size.

Therefore, if we want to optimize the site for smartphones, this option does not work. We need to somehow tell the browser that our page is intended to be displayed on mobile devices and set rules for the correct behavior of the viewport.

And this is exactly why we will use the meta tag viewport, which was introduced by Apple and, as usual, copied by others.

Add to block the following line:

And this is what will happen as a result:

It's a completely different matter. By setting the viewport meta tag to “device-width”, we're telling the browser that the viewport's width is the width of that device, rather than the standard 980px width it might assume by default. On a large number of smartphones, the screen width is 320px (in portrait mode). You can set the width yourself to 320px, which will give the same result, but on some smartphones the screen width may be different, so the best option is to use device-width.

One of the most common options for defining the viewport is the following option:

which defines the width of the page and sets the initial scale.

Also, you can often find this option:

In this case, the page is set to the width of the device on which it is opened, and any scaling is prohibited - both initial when loading and custom scaling after loading. In this mode, the mobile web page functions as a mobile application, where the user can only scroll vertically or horizontally. However, it is better not to use such an entry blindly, because the user cannot be prohibited from zooming out and zooming in at will, unless the design idea requires it. For example, a font that is too small impairs the readability of the text and in this case it is necessary to use an approximation.

The viewport meta tag is relatively new, so it is not currently supported by all browsers, especially for older smartphone models. In such cases, it makes sense to use some old methods that allow the browser to identify the page as optimized for the mobile web. This can be done using the following meta tags:

You can read more about these and other specific mobile tags.

Possible options for the viewport meta tag

Viewport compatibility table.

Two viewports

So let's say the viewport is too narrow for our CSS template. The obvious solution is to make the viewport wider. However, first, let’s divide the concept of viewport into two parts: visual viewport and page viewport.

The concept of viewports is explained very well by George Cummins on Stack Overflow:

Think of a page viewport as a large image with a constant size and shape. Now imagine a smaller frame through which you look at this large image. This frame is surrounded by an opaque material that prevents you from seeing the entire large image except for parts of it. The part of the large image that is visible through the frame will be the visual viewport. If you move away from the large image with the frame (zoom out, i.e. reduce the scale), you can see the entire image at once, or come closer (zoom in, increase the scale), then you can see only part of the image. Also, you can rotate the frame to change its orientation (portrait or landscape), while the size and shape of the large image (page viewport) always remains unchanged.

Visual viewport- part of the page that is currently visible on the screen. The user can scroll to change the visible part of the page, or use zoom to change the size of the visual viewport.

Page layout, especially if its width is specified as a percentage, is calculated relative to page viewport, which is significantly wider than the visual viewport.

Thus, the -element initially takes the width of the page viewport and then the CSS behaves as if the screen were much wider than the phone screen. This provides the site with the same behavior as in a desktop browser.

How wide is the visual viewport itself? It depends on the browser. Safari iPhone uses 980px, Opera uses 850px, Android WebKit uses 800px, and IE uses 974px.

Some browsers behave differently:

Symbian WebKit tries to equate the page viewport with the visual viewport, and this means that percentage-width elements can behave unpredictably. However, if the page does not fit in the visual viewport due to absolute values, the browser stretches the page viewport to a maximum of 850 pixels.

Samsung WebKit makes the page viewport equal in width to the widest element.

On BlackBerry, with a scale of 100%, the page viewport will be equal to the visual viewport in any case.

Zooming

Both viewports are measured in CSS pixels. However, during scaling, the dimensions of the visual viewport change (as you zoom in, fewer CSS pixels fit on the screen), while the dimensions of the page viewport remain unchanged. (If this were not the case, the browser would constantly reflow the page due to recalculation of the percentage width.)

Understanding the page viewport

To better understand the size of a page viewport, you should look at what happens at the smallest possible page scale. Most mobile browsers display any page at the smallest scale by default.

The fact is that the dimensions of the viewport of the browser page completely coincide with the screen at the maximum reduced scale and are therefore equal to the visual viewport.

Thus, the width and height of the page viewport is equal to everything that is displayed on the screen at the smallest scale. When the user zooms in, these dimensions remain unchanged.

The width of the page viewport is always the same. If you change the orientation of the smartphone screen, the visual viewport will change, but at the same time the mobile browser will adapt to the new orientation by zooming in slightly so that the page viewport will again be the same width as the visual viewport.

This has affected the page viewport height, which is now much smaller than in portrait orientation. But for developers, width is more important than height.

Android and target-densitydpi

Android devices have their own viewport attribute that disables scaling for displays with different resolutions.

There will be no scaling on HDPI (240dpi) devices.

This entry means that there will be no scaling on any Android device.

When we want to customize the browser window on our device, we usually use the HTML tag . However, oddly enough, the meta tag is not “normative” - it is not in the official W3C standard.

The viewport meta tag was first implemented by Apple in the iPhone and later by other browser vendors. Today it is widely used due to the popularity of iOS, Android and other platforms for tablets and smartphones.

Since the viewport meta tag is purely for customizing layout, it can be said to be a CSS tag. That's why the W3C is looking to standardize a new adaptation method that moves window control from HTML to CSS.

@viewport CSS rule

With the new @viewport rule, we have the same window control as with the meta tag, except that this control is done entirely through CSS. Just like when using a meta tag, it is recommended to set the width of the browser window using device-independent device-width:

@viewport (
width: device-width;
}

Today @viewport is used by programmers for “snap mode” in IE10 - a Windows 8 feature that allows you to work in multi-window mode. Oddly enough, IE10 ignores the meta tag if the window size is less than 400 pixels, making it impossible for sites using the meta tag to optimize for such small windows. To fix this, programmers should use the device-width parameter mentioned above, or define an @viewport rule in a media query.

Using @viewport in media queries

We can use @viewport in media queries. For example, the following media query is used to adjust the layout of a window less than 400 pixels wide (such as multi-window mode in IE10) to 320 pixels wide.

@media screen and (max-width: 400px) (
@-ms-viewport ( width: 320px; )
...
}

In this example, if the device is set to a resolution range of 640 to 1024 pixels, the @viewport rule scales the window to 640 pixels.

@media screen and (min-width: 640px) and (max-width: 1024px) (
@viewport (width: 640px; )
...
}

New @viewport handles

Even though we can control the zoom and zoom function, some viewport properties - or "handles" as they are now called - have changed.

zoom

The zoom descriptor is the equivalent of initial-scale in a meta tag. Just like minimum-scale and maximum-scale, there are descriptors for max-zoom and min-zoom:

@viewport (
width: device-width;
zoom: 2;
}

user-zoom

The user-zoom descriptor is equivalent to the user-scalable parameter

@viewport (
width: device-width;
user-zoom: fixed;
}

Browser support

Currently the @viewport css rule is only supported by Opera and IE10. It looks like Chrome and other browsers will be implementing it soon, because... It is expected that this meta tag will soon become the new official web standard.

For now, you need to add a vendor prefix to the @viewport rule:

@-ms-viewport (
width: device-width;
}
@-o-viewport (
width: device-width;
}
@viewport(
width: device-width;
}

Of course, we still need to include the viewport meta tag in the html page because... it's not going anywhere anytime soon. But it’s not so scary to look into the future - adding the @viewport rule just makes our sites and applications ready for change

General error

A common mistake is that developers often use initial-scale=1 for non-responsive templates. This setting results in 100% of the page being rendered without scaling. If the design is not responsive, then the user either has to scroll a lot or manually set the zoom to see the entire page. The worst case is the combination of user-scalable=no or maximum-scale=1 with initial-scale=1. This disables the ability to scale on the site. And without scaling there is no way to see the entire page. If your template is not responsive, do not disable scaling or reset the initial scale!

The viewport meta tag is responsible for the viewing area of ​​the site on the screen. Simply put, this is setting the screen width for the site. For example, a website will look correct on a PC monitor, but on a smartphone it will be difficult to read, because... font is too small.

To solve the problem of displaying the site on small browser resolutions, a new direction was invented - adaptive site layout, with the goal of making the site convenient for users with different browser widths.

The viewport meta tag allows you to adjust the viewport width and page scale. By definition, a viewport is the area of ​​the site visible to the user without scrolling.

... ...

Above, only two attributes were specified: width and initial-scale , which are responsible for the width and scale, respectively. You can also set other parameters separated by commas. Let's consider all possible attributes.

• width - sets the width of the browser viewport. Accepts an integer value (from 200 to 10000) in pixels or device-width . This attribute is required for adaptive website layouts.
• height - sets the height of the browser viewport. Accepts an integer value in pixels (from 200 to 10000) or a device-height value. Since the determining factor is the width, it is not necessary to specify the height for adaptive layout.
• initial-scale - scaling factor. Accepts real values ​​(from 0.1 to 10.0). The default value is "1.0", which means every physical pixel corresponds to a hardware pixel.
• user-scalable - sets whether the user can scale the page. Accepts two values: no/yes
• minimum-scale - sets the minimum scale. Measured in real numbers.
• maximum-scale - sets the minimum scale. Measured in real numbers.

Viewport examples

New smartphones have high resolution. In this regard, it is necessary to clarify the initial-scale attribute, which is responsible for scaling. The fact is that by making the scale 1.0, we will achieve too small a text that will be impossible to read. Therefore, the following table applies when converting scale for high pixel density devices.

There is no doubt that you use the viewport meta tag when working with responsive templates. But did you know that the viewport meta tag can also be useful for non-responsive templates? If you don't have time to convert your project template to responsive, then you should read this tutorial to use the viewport meta tag to improve the appearance of your design on mobile devices.

Common usage of the viewport meta tag

Typically the viewport meta tag is used to set the width and initial scale for the viewport on mobile devices. Here's an example.

Using the viewport meta tag in a non-responsive template

By default, the viewport width on iPhone is set to 980px. But your design may not fit this range well. The value may be too large or small for the pattern. Below are two examples. which use the viewport meta tag to improve the appearance of a non-responsive template on mobile devices.

Example

View the Themify website from your mobile device.

The left screenshot shows the appearance of the site without using the viewport meta tag. You may notice that the page touches both sides of the screen. If you add a viewport meta tag specifying a width of 1024px, there will be a gap left and right.

Another example

If your design is too narrow, it will also look clunky. Let's say the width of the container is 700px and it doesn't adapt. In this case, the appearance will be like the screenshot below on the left - a wide white stripe on the left.

The problem can be easily resolved by setting the viewport width to 720px. The width of the design does not change, but the mobile device will scale it to 720px.

General error

A common mistake is that developers often use initial-scale=1 for non-responsive templates. This setting results in 100% of the page being rendered without scaling. If the design is not responsive, then the user either has to scroll a lot or manually set the zoom to see the entire page. The worst case is the combination of user-scalable=no or maximum-scale=1 with initial-scale=1 . This disables the ability to scale on the site. And without scaling there is no way to see the entire page. If your template is not responsive, do not disable scaling or reset the initial scale!