In-depth understanding of viewport in mobile front-end development

In-depth understanding of viewport in mobile front-end development

1. The concept of viewport

In layman's terms, the viewport on a mobile device is the area on the device's screen that can be used to display our web pages. To be more specific, it is the area on the browser (or the webview in an app) that is used to display web pages. However, the viewport is not limited to the size of the browser's visible area. It may be larger or smaller than the browser's visible area. By default, generally speaking, the viewport on a mobile device is larger than the browser's visible area. This is because the resolution of mobile devices is relatively small compared to that of desktop computers. Therefore, in order to display those traditional websites designed for desktop browsers on mobile devices, browsers on mobile devices will set their default viewport to 980px or 1024px (or other values, which are determined by the device itself), but the consequence is that the browser will have a horizontal scroll bar because the width of the browser's visible area is smaller than the width of the default viewport. The following figure lists the default viewport widths of browsers on some devices.

2. 1px in CSS is not equal to 1px on the device

In CSS, we usually use px as a unit. In desktop browsers, 1 pixel of CSS often corresponds to 1 physical pixel of the computer screen. This may give us an illusion that the pixel in CSS is the physical pixel of the device. But the actual situation is not so. The pixel in CSS is just an abstract unit. In different devices or different environments, the physical pixel of the device represented by 1px in CSS is different. In web pages designed for desktop browsers, we don't need to worry about this, but on mobile devices, we must understand this. In earlier mobile devices, the screen pixel density was relatively low. For example, the resolution of iPhone 3 is 320x480. On iPhone 3, one CSS pixel is indeed equal to one physical pixel of the screen. Later, with the development of technology, the screen pixel density of mobile devices became higher and higher. Starting from iPhone 4, Apple launched the so-called Retina screen, which doubled the resolution to 640x960, but the screen size did not change. This means that on the same size screen, the pixels have doubled. At this time, one CSS pixel is equal to two physical pixels. The same is true for other brands of mobile devices. For example, Android devices can be divided into different levels such as ldpi, mdpi, hdpi, xhdpi, etc. according to the screen pixel density, and the resolution is also varied. How many physical screen pixels are equivalent to a CSS pixel on an Android device also varies from device to device, and there is no definitive answer.

Another factor that can cause the change of px in CSS is user zooming. For example, when the user zooms in on the page by one time, the physical pixel represented by 1px in CSS will also double; conversely, when the user zooms out on the page by one time, the physical pixel represented by 1px in CSS will also decrease by one time. This will be discussed later in the article.

In mobile browsers and some desktop browsers, the window object has a devicePixelRatio property, which is officially defined as: the ratio of device physical pixels to device independent pixels, that is, devicePixelRatio = physical pixels / independent pixels. The px in CSS can be regarded as the independent pixels of the device, so through devicePixelRatio, we can know how many physical pixels a CSS pixel on the device represents. For example, on an iPhone with a Retina screen, the value of devicePixelRatio is 2, which means that 1 CSS pixel is equivalent to 2 physical pixels. However, it should be noted that devicePixelRatio still has some compatibility issues in different browsers, so we cannot fully trust this thing now. For specific details, please refer to this article.

Test results of devicePixelRatio:

3. PPK’s theory about three viewports

Ppk has done a lot of research on viewports on mobile devices (first article, second article, third article). If you are interested, you can take a look. Many data and opinions in this article are also from there. Ppk believes that there are three viewports on mobile devices.

First of all, the browser on the mobile device thinks that it must be able to display all websites normally, even those that are not designed for mobile devices. But if the browser's visible area is used as the viewport, because the screen of the mobile device is not very wide, those websites designed for desktop browsers will inevitably be squeezed together when displayed on the mobile device because the viewport of the mobile device is too narrow, and even the layout will be messed up. Some people may ask, aren't there many mobile phones with very large resolutions now, such as 768x1024, or 1080x1920, so is it okay for such mobile phones to display websites designed for desktop browsers? As we have said before, 1px in CSS does not represent 1px on the screen. The larger your resolution, the more physical pixels 1px in CSS will represent, and the larger the value of devicePixelRatio will be. This is easy to understand, because your resolution has increased, but the screen size has not increased much. You must let 1px in CSS represent more physical pixels so that the size of 1px on the screen is similar to those of low-resolution devices, otherwise it will be too small to see clearly. So on a device like 1080x1920, by default, maybe you only need to set the width of a div to more than 300px (depending on the value of devicePixelRatio), and it will be the full width of the screen. Back to the topic, if the visible area of ​​the browser on a mobile device is set to viewport, some websites will be displayed incorrectly because the viewport is too narrow, so these browsers decide to set the viewport to a wider value by default, such as 980px, so that even those websites designed for desktops can be displayed normally on mobile browsers. PPK calls this browser's default viewport the layout viewport. The width of this layout viewport can be obtained through document.documentElement.clientWidth.

However, the width of the layout viewport is greater than the width of the browser's visible area, so we also need a viewport to represent the size of the browser's visible area. PPK calls this viewport the visual viewport. The width of the visual viewport can be obtained through window.innerWidth, but it cannot be obtained correctly in Android 2, Oprea mini and UC8.

Now we already have two viewports: layout viewport and visual viewport. But the browser thinks it is not enough, because more and more websites are designed separately for mobile devices, so there must be a viewport that can perfectly adapt to mobile devices. The so-called perfect adaptation means that, first of all, the user does not need to zoom or scroll horizontally to view all the content of the website normally; secondly, the size of the displayed text is appropriate. For example, a 14px text will not be too small to be seen clearly on a high-density pixel screen. Ideally, this 14px text will be displayed at a similar size regardless of the density of the screen and the resolution. Of course, it is not just text, other elements such as pictures are also the same. PPK calls this viewport the ideal viewport, which is the third viewport-the ideal viewport for mobile devices.

The ideal viewport does not have a fixed size, and different devices have different ideal viewports. The ideal viewport width of all iPhones is 320px, regardless of whether its screen width is 320 or 640. In other words, in an iPhone, 320px in CSS represents the width of the iPhone screen.

But the situation of Android devices is more complicated. Some devices have 320px, some have 360px, some have 384px, and so on. You can check the ideal viewport width of different devices at http://viewportsizes.com, which collects the ideal widths of many devices.

To summarize: PPK divides the viewport on mobile devices into three categories: layout viewport, visual viewport and ideal viewport. The ideal viewport is the most suitable viewport for mobile devices. The width of the ideal viewport is equal to the screen width of the mobile device. As long as the width of an element is set to the width of the ideal viewport in CSS (in px), the width of the element is the width of the device screen, which is 100% of the width. The significance of the ideal viewport is that no matter what the screen resolution is, those websites designed for the ideal viewport can be perfectly presented to users without the need for users to manually zoom in and out or for horizontal scroll bars to appear.

4. Use meta tags to control viewport

The default viewport for mobile devices is the layout viewport, which is a viewport that is wider than the screen. However, when developing websites for mobile devices, we need an ideal viewport. So how can we get the ideal viewport? This is where the meta tag comes in.

When we develop websites for mobile devices, one of the most common actions is to copy the following into our head tag:

 <meta name= "viewport" content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" >

The function of this meta tag is to make the current viewport width equal to the width of the device, and not allow users to manually zoom in and out. Different websites may have different requirements on whether to allow users to zoom in and out, but making the viewport width equal to the width of the device should be the effect everyone wants. If you don't set it this way, the default viewport that is wider than the screen will be used, which means that a horizontal scroll bar will appear.

What exactly does this meta tag named viewport contain, and what is its function?

The meta viewport tag was first introduced by Apple in its Safari browser to solve the viewport problem on mobile devices. Later, Android and major browser manufacturers followed suit and introduced support for meta viewport, which has proven to be very useful.

In Apple's specification, meta viewport has 6 attributes (for the time being, those things in content are called attributes and values), as follows:

These attributes can be used at the same time, individually or in combination. When using multiple attributes at the same time, just separate them with commas.

In addition, Android also supports the private attribute target-densitydpi, which indicates the density level of the target device and determines how many physical pixels 1px in CSS represents.

The target-densitydpi value can be a number or one of the strings high-dpi, medium-dpi, low-dpi, or device-dpi. It should be noted that when target-densitydpi=device-dpi, 1px in CSS is equal to 1px in physical pixels.

Because this attribute is only supported by Android, and Android has decided to abandon the target-densitydpi attribute, we should avoid using this attribute.

#p#

5. Set the current viewport width to the ideal viewport width

To get the ideal viewport, you must set the default layout viewport width to the screen width of the mobile device. Because the width in the meta viewport can control the width of the layout viewport, we only need to set the width to the special value of width-device.

 <meta name= "viewport" content= "width=device-width" >

The following figure shows the test results of this code on major mobile browsers:

It can be seen that by setting width=device-width, all browsers can change the current viewport width to the ideal viewport width. However, it should be noted that on iPhone and iPad, whether in portrait or landscape orientation, the width is the ideal viewport width in portrait orientation.

It seems that everyone can write in this way. Even if you have never eaten pork, you have seen pigs run. Indeed, when we develop web pages on mobile devices, whether you understand what viewport is or not, you may only need this one line of code.

But you definitely don't know

 <meta name= "viewport" content= "initial-scale=1" >

This code can achieve the same effect as the previous code, and can also change the current viewport to the ideal viewport.

Haha, you are dumbfounded, because theoretically, the function of this code is just not to scale the current page, that is, the page should be as big as it should be. Then why does width=device-width have the effect?

To understand this, you first need to understand what the zoom is relative to, because the zoom value here is 1, which means it is not zoomed, but the ideal viewport is achieved. So, there is only one answer, the zoom is relative to the ideal viewport. When the ideal viewport is zoomed 100%, that is, the zoom value is 1, don’t we get the ideal viewport? As it turns out, this is indeed the case. The following figure shows the test results of major mobile browsers to see whether they can change the current viewport width to the ideal viewport width after setting <meta name="viewport" content="initial-scale=1">.

The test results show that initial-scale=1 can also change the current viewport width to the ideal viewport width, but this time it is the turn of IE on Windows Phone to set the width to the ideal viewport width in portrait mode regardless of whether it is in portrait or landscape mode. However, this minor flaw is no longer important.

But what if width and initial-scale=1 appear at the same time and there is a conflict? For example:

 <meta name= "viewport" content= "width=400, initial-scale=1" >

Width=400 means setting the width of the current viewport to 400px, while initial-scale=1 means setting the width of the current viewport to the width of the ideal viewport. So which command should the browser obey? The one that comes later in the order of writing? No. When encountering this situation, the browser will take the larger value of the two. For example, when width=400 and the width of the ideal viewport is 320, it takes 400; when width=400 and the width of the ideal viewport is 480, it takes the width of the ideal viewport. (ps: In the UC9 browser, when initial-scale=1, no matter what the value of the width attribute is, the width of the viewport is always the width of the ideal viewport)

Finally, to sum up, to set the current viewport width to the ideal viewport width, you can either set width=device-width or set initial-scale=1, but both have a small flaw, that is, iPhone, iPad and IE will not distinguish between horizontal and vertical screens, and all will be based on the ideal viewport width of the vertical screen. Therefore, the most perfect way to write it should be to write both, so that initial-scale=1 solves the problem of iPhone and iPad, and width=device-width solves the problem of IE:

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

6. More knowledge about meta viewport

1. About scaling and the default value of initial-scale

First, let's discuss the issue of scaling. As mentioned before, scaling is relative to the ideal viewport. The larger the scaling value, the smaller the width of the current viewport, and vice versa. For example, in the iPhone, the width of the ideal viewport is 320px. If we set initial-scale=2, the width of the viewport will become only 160px. This is easy to understand. It is enlarged by twice, that is, the original 1px becomes 2px, but 1px to 2px does not change the original 320px to 640px, but when the actual width remains unchanged, 1px becomes the same length as the original 2px, so after enlarging by 2 times, the width that originally required 320px to fill now only needs 160px. Therefore, we can derive a formula:

Visual viewport width = ideal viewport width / current zoom value

Current zoom value = ideal viewport width / visual viewport width

ps: The width of the visual viewport refers to the width of the browser's visible area.

Most browsers conform to this theory, but there are some problems with the native browsers on Android and IE. Android's built-in webkit browser only behaves normally when initial-scale = 1 and the width attribute is not set, which means that this theory is basically useless for it; IE does not care about the initial-scale attribute at all. No matter what you set it to, the initial-scale effect is always 1.

Okay, now let's talk about the default value of initial-scale. That is, when this property is not set, what is its default value? Obviously it will not be 1, because when initial-scale = 1, the current layout viewport width will be set to the width of the ideal viewport, but as mentioned before, the default layout viewport width of each browser is generally 980, 1024, 800, etc., and none of them is the ideal viewport width at the beginning, so the default value of initial-scale is definitely not 1. It seems that there is no way to get the default value of initial-scale on Android devices, or it simply has no default value. You must write it out explicitly for it to work. Let's ignore it. Here we focus on the default value of initial-scale on iPhone and iPad.

According to the test, we can draw a conclusion on iPhone and iPad, that is, no matter how much width you set for layout viewport, if you do not specify the initial scale value, iPhone and iPad will automatically calculate the initial-scale value to ensure that the current layout viewport width is the width of the browser's visible area after scaling, which means that there will be no horizontal scroll bar. For example, on iPhone, we do not set any viewport meta tags, and the width of the layout viewport is 980px, but we can see that there is no horizontal scroll bar in the browser, and the browser shrinks the page by default. According to the above formula, current scale value = ideal viewport width / visual viewport width, we can conclude:

 Current zoom value = 320 / 980  

That is, the current default value of initial-scale should be 0.33. When you specify the value of initial-scale, this default value will not take effect.

In short, just remember this conclusion: On iPhone and iPad, no matter how wide you set the viewport, if you do not specify a default zoom value, iPhone and iPad will automatically calculate this zoom value to achieve the purpose of not having a horizontal scroll bar on the current page (or the width of the viewport is the width of the screen).

2. Dynamically change the meta viewport tag

First method

You can use document.write to dynamically output the meta viewport tag, for example:

 document.write( '<meta name="viewport" content="width=device-width,initial-scale=1">' )

Second method

Change it by setAttribute

 <meta id= "testViewport" name= "viewport" content= "width = 380" >
 <script>
 var mvp = document.getElementById( 'testViewport' );
 mvp.setAttribute( 'content' , 'width=480' );
 </script>

A bug in the browser that comes with Android 2.3

 <meta name= "viewport" content= "width=device-width" > 
 
 <script type= "text/javascript" >
 alert(document.documentElement.clientWidth); //600 pixels will appear when the screen is open, normally 320 pixels will appear  
 </script> 
 
 <meta name= "viewport" content= "width=600" > 
 
 <script type= "text/javascript" >
 alert(document.documentElement.clientWidth); // Pop up 320, normally it should pop up 600  
 </script>

The ideal viewport width of the tested phone is 320px. The value that pops up for the first time is 600, but this value should be the result of the first line of meta tags. The value that pops up for the second time is 320, which is the effect achieved by the first line of meta tags. Therefore, in the built-in browser of Android 2.3 (perhaps all 2.x versions), overwriting or changing the meta viewport tag will produce very confusing results.

VII. Conclusion

After saying so much nonsense, it is still necessary to summarize something useful in the end.

First of all, if the meta viewport tag is not set, the default width of the browser on the mobile device is 800px, 980px, 1024px, etc., which is larger than the screen width. The unit px used for width here refers to the px in CSS, which is different from the px representing the actual physical pixels of the screen.

Second, each mobile device browser has an ideal width. This ideal width refers to the width in CSS, which has nothing to do with the physical width of the device. In CSS, this width is equivalent to the width represented by 100%. We can use the meta tag to set the viewport width to the ideal width. If you don't know what the ideal width of the device is, then use the special value device-width. At the same time, initial-scale=1 also has the function of setting the viewport width to the ideal width. So, we can use

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

To get an ideal viewport (that is, the ideal viewport mentioned earlier).
Why do we need an ideal viewport? For example, the ideal viewport width of a mobile phone with a resolution of 320x480 is 320px, while the ideal viewport width of another mobile phone with the same screen size but a resolution of 640x960 is also 320px. Why should the ideal width of the mobile phone with a larger resolution be the same as the ideal width of the mobile phone with a smaller resolution? This is because only in this way can we ensure that the same website looks the same or similar on devices with different resolutions. In fact, although there are so many different types of mobile phones with different brands and resolutions on the market, their ideal viewport widths can be summarized as 320, 360, 384, 400, etc., which are very close. The similarity of ideal widths means that the website we make for the ideal viewport of a certain device will not differ much on other devices, or even perform the same.