First of all, let’s consider one of the key points in the application of adaptive design – the viewport meta tag (in fact, adaptive design begins with this tag). Let’s start with the following web page:
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>Regular web page</title>
</head>
<body>
<h2>Regular web page</h2>
</body>
</html>
This is a standard web page that would look like this in a normal browser:
However, if we run the same web page on a mobile device emulator or on a real mobile device, we can hardly read what is written on it:
By applying scaling, the user can finally see what is written there. However, this is not very convenient. At the same time, the web page has a lot of empty space, which is not very beautiful.
Why is this happening? The fact is that each mobile browser sets some initial sizes for the page and then tries to adapt it to the screen sizes 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 that a web browser is trying to fit into a web page. For example, the Safari browser on the iPhone and iPod sets the default viewport width to 980 pixels. That is, having received a page and entered it in a viewport with a width of 980 pixels, the browser compresses it to the size of a 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 all elements on the page will have a scaling factor of 320/980 applied.
Why is 980 pixels used in this case, and, say, not the actual screen size? The thing is that, by default, the browser thinks that every web page is designed for desktops. And the usual width of a desktop site can be considered 980 pixels.
In this case, each browser sets its own width of the viewport area, optionally 980 pixels. Other browsers may support different values for the initial width. But they will also perform scaling.
To avoid this not very pleasant picture, you should use the viewport meta tag. It has the following definition:
In the content attribute of the meta tag, we can define the following parameters:
|
Parameter |
Values |
Description |
|
width |
Takes an integer value in pixels or a value |
Sets the width of the viewport area |
|
height |
Takes an integer value in pixels or a value |
Sets the height of the viewport area |
|
initial scale |
Floating point number from 0.1 and above |
Specifies the scaling factor for the initial size of the viewport. A value of 1.0 specifies no |
|
user-scalable |
no/yes |
Specifies whether the user can use gestures to zoom the page |
|
minimum scale |
Floating point number from 0.1 and above |
Sets the minimum viewport size scale. A value of 1.0 specifies no scaling |
|
maximum-scale |
Floating point number from 0.1 and above |
Sets the maximum viewport size scale. A value of 1.0 specifies no scaling |
Now let’s modify the previous example web page using the meta tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Regular web page</title>
</head>
<body>
<h2>Regular web page</h2>
</body>
</html>
The web page definitely looks better thanks to the use of the viewport meta tag. Using the parameter, width=device-width we tell the web browser that the initial width of the viewport area should not be considered 980 pixels or some other number, but the immediate width of the device screen. So then the web browser won’t do any scaling since we have the same viewport width and width.
We can also use other options, such as preventing the user from scaling the page dimensions:
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0">