Viewport — CSS: Site Adaptability

The first thing you should be familiar with when creating an adaptive layout is the viewport meta tag. Created by Apple, it's become a standard in layout design.

Before we start looking at this meta tag, you need to understand what a viewport is in a browser. viewport is the user-visible area of the page, which is accessible without scrolling.

In the picture below, the viewport is indicated by a red border.

Before smartphones, the viewport was largely the same from monitor to monitor, so creators of web pages didn't care that much about how their page would look on another monitor. With the advent of mobile devices, things have become more complicated, there's a wide variety of viewports on the market. Because of this, almost all of the sites that were created in the past are poorly displayed on mobile devices. These sites often have horizontal scrolling, which interferes with how you view these sites. No doubt you've come across sites like this before.

The viewport meta tag allows us to specify which viewport is needed for the page. It is most often used to indicate the width of the viewing area, since vertical scrolling is natural when working with web pages. The width is set using the width attribute:

<meta name="viewport" content="width=700">

After setting this meta tag, the width of our site's viewing area becomes 700 pixels.

To see how it works, let's look at an emulation of the iPhone 5 screen. The standard Safari browser defaults to a viewport of 980 pixels. Let's add a block with a width of 700 pixels. Note that there's currently no viewport HTML meta tag in viewport.

If the entire width of our site is 700 pixels, then the gap between the block and the edge of the screen will not suit us. Now add the viewport meta tag, specifying a width of 700 pixels.

After setting the width of the viewing area to 700 pixels, our block completely covers the screen of the device.

In addition to specifying the width in pixels, there is a special device-width value which will set the width of the area equal to the screen resolution of the device from which the page is opened.

Another example would be text. Let's take an emulation of the iPhone 5, which has a resolution of 320 pixels wide with a standard browser viewport of 980 pixels. Write any text with a font size of 20 pixels. It's quite important for text to be comfortable to read from a mobile device's screen. But what do we get?

If you can make out the text, you have very good eyesight :) But it's not really the result we expected. This is because our viewport is much larger than the actual resolution.

Adjust the viewport using the device-width value:

That way we can control the width of the viewport ourselves, without having to rely on the standard values of mobile browsers. In addition to the width property, the viewport meta tag has several other attributes.

Scaling

initial-scale — specifies the page scaling factor. A number from 0.1 to 10 is used as the value

initial-scale=1.0

initial-scale=2.0

Often a value of 1.0 is used so that the browser defaults to display our layout at its original scale, rather than trying to adjust it to fit the viewing area. Although it seems like a good idea, any changes to the layout must be monitored by the developer.

minimum-scale and maximum-scale set the minimum and maximum scaling factor of the page.

user-scalable allows the user to scale the page. In smartphones, this is most often done with a two-finger gesture. The attribute has only two possible values: yes and no.

Common value of the meta tag viewport

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

Additional materials

• List of common devices and their viewport values

Additional assignment

Create a page on your computer with one block of text. Try different viewport parameters. Be sure to set different widths to the text block and monitor its behavior.

---

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

• Article “How to Learn and Cope with Negative Thoughts“
• Article “Learning Traps“
• Article “Complex and simple programming tasks“