Register to get access to free programming courses with interactive exercises

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.

Viewport 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.

Horizontal scroll

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.

Viewport 980 pixels

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.

Viewport 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?

20px text on iPhone 5

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:

20px text on iPhone5 with Viewport meta tag

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=1.0

initial-scale=2.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

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.


Hexlet Experts

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

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs
profession
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.