In-depth understanding of viewport in Mobile front-end development
To reconstruct or develop a webpage on a mobile device, you must first understand the viewport on the mobile device, only by understanding the concept of viewport and the use of meta Tags related to viewport can we better adapt our webpage to or respond to mobile devices with different resolutions.
1. Concepts of viewport
In layman's terms, viewport on a mobile device is the area on the device's screen that can be used to display our webpage. Specifically, it is a browser (or webview in an app) the area used to display the webpage, but the viewport is not limited to the size of the visible area of the browser. It may be larger than the visible area of the browser, or smaller than the visible area of the browser. By default, the viewport on a mobile device is larger than the visible area of the browser. This is because the resolution of a mobile device is relatively small than that of a desktop computer, so in order to display those traditional Websites designed for desktop browsers on mobile devices, browsers on mobile devices set their default viewport to 980px or 1024px (or other values, which are determined by the device ), however, the consequence is that the browser will display a horizontal scroll bar, because the width of the visible area of the browser is smaller than the width of the default viewport. Lists the default viewport width of browsers on some devices.
2. 1px in css is not equal to 1px of the device
In css, we generally use px as the unit. In a desktop browser, one pixel of css usually corresponds to one physical pixel on the computer screen, which may lead to our illusion, that is, pixels in css are physical pixels of devices. However, this is not the case. pixels in css are only an abstract unit. In different devices or environments, 1px in css represents different physical pixels of devices. In web pages designed for desktop browsers, we don't need to worry about this, but we must understand this on mobile devices. In earlier mobile devices, the screen pixel density was relatively low. For example, iPhone 3 has a resolution of 320x480. on iPhone 3, a css pixel is indeed equal to a screen physical pixel. Later, with the development of technology, the pixel density of mobile devices is getting higher and higher. From iPhone 4, Apple launched the so-called Retina screen, which doubled the resolution and changed to 640x960, the screen size remains unchanged, which means that the pixels on the screen of the same size are doubled. At this time, a css pixel is equal to two physical pixels. This is also true for mobile devices of other brands. For example, Android devices can be divided into ldpi, mdpi, hdpi, xhdpi, and other levels based on the screen pixel density. The resolution is also varied. The number of physical screen pixels that a css pixel on Android devices is equivalent, there is no final conclusion because devices are different.
Another factor is the change of px in css, that is, user scaling. For example, if a user doubles the page size, the physical pixels represented by 1px in css will also double; otherwise, the page will be doubled, the physical pixels represented by 1px in css are also doubled. This will be discussed later in this article.
In mobile browsers and some desktop browsers, the window object has a devicePixelRatio attribute, which is officially defined as the ratio of physical pixels of devices to independent pixels of devices, that is, devicePixelRatio = physical pixel/independent pixel. Px in css can be regarded as the independent pixel of the device. Therefore, through devicePixelRatio, we can know how many physical pixels a css pixel on the device represents. For example, on the iphone of the Retina screen, the value of devicePixelRatio is 2, that is, one css pixel is equivalent to two physical pixels. However, devicePixelRatio has some compatibility issues in different browsers. Therefore, we cannot fully trust this feature yet. For details, refer to this article.
Test results of devicePixelRatio:
3. PPK's Theory of Three viewports
Ppk has a lot of research on viewport on mobile devices (article 1, article 2, and article 3). If you are interested, you can take a look, there are a lot of data and opinions in this article. Ppk believes that there are three viewports on the mobile device.
First, browsers on mobile devices think that they must make all websites display normally, even those websites that are not designed for mobile devices. However, if you use the visible area of the browser as the viewport, because the screen of mobile devices is not very wide, when the Websites designed for the desktop browser are displayed on mobile devices, it is inevitable that the viewport of a mobile device is too narrow, and the layout will be messy. Someone may ask, isn't there a lot of cell phones with very high resolutions, such as 768x1024 or x, is it okay to use such a mobile phone to display a website designed for a desktop browser? As we have already said, 1px in css does not represent 1px on the screen. The larger the Resolution, the more physical pixels that 1px represents in css, and the larger the value of devicePixelRatio, this is easy to understand, because you have increased the resolution, but the screen size is not much larger. You must make 1px in css more physical pixels, in order to make the size of 1 px items on the screen similar to those of low-resolution devices, otherwise it will be too small to see clearly. Therefore, on devices like 1080x1920, by default, you may only need to set the width of a div to more than 300 px (depending on the value of devicePixelRatio ), is the width of the full screen. Back to the topic, if you set the visible area of the browser on a mobile device to viewport, some websites will be confused because the viewport is too narrow, therefore, these browsers decide to set the viewport to a wide value by default, such as 980px, so that even those websites designed for the desktop can be normally displayed on mobile browsers. Ppk calls the default viewport of the browser layout viewport. The width of the layout viewport can be obtained through document.doc umentElement. clientWidth.
However, the width of layout viewport is greater than the width of the visible area of the browser. Therefore, we need a viewport to indicate the size of the visible area of the browser. ppk calls this viewport visual viewport. The width of visual viewport can be obtained through window. innerWidth, but it cannot be obtained correctly in Android 2, Oprea mini and UC 8.
Now we have two viewports: layout viewport and visual viewport. But the browser does not think it is enough, because more and more websites are designed separately for mobile devices, so there must be a viewport that perfectly adapts to mobile devices. The so-called perfect adaptation means that, first, you do not need to zoom in and out the scroll bar to view all the content of the website. Second, the size of the displayed text is appropriate, for example, a 14 PX text cannot be viewed because it is displayed too small on a high-density pixel screen. The ideal situation is that the 14 PX text, regardless of the density of the screen, at what resolution, the displayed size is almost the same. Of course, it's not just text, but other elements like images. Ppk calls this viewport ideal viewport, which is the third viewport-the ideal viewport of the mobile device.
Ideal viewport does not have a fixed size. Different devices have different ideal viewports. The ideal viewport width of all iPhones is 320px, regardless of whether the screen width is 320 or 640. That is to say, in the iphone, The 320px in css represents the iphone screen width.
But Android devices are more complex, 320px, 360px, 384px, etc. About the different device ideal viewport width is how much, you can go to the http://viewportsizes.com to view, it collects the ideal width of many devices.
To sum up, ppk divides viewports on mobile devices into three types: layout viewport, visual viewport, and ideal viewport. ideal viewport is the most suitable viewport for mobile devices, the width of ideal viewport is equal to the screen width of the mobile device. If you set the width of an element in css to the width of ideal viewport (unit: px ), the width of this element is the screen width of the device, that is, the effect of 100% in width. The significance of ideal viewport is that, no matter what resolution screen, Websites designed for ideal viewport do not require manual scaling or horizontal scroll bars, can be perfectly presented to users.
4. Use meta tags to control viewport
The default viewport of a mobile device is layout viewport, which is a viewport wider than the screen. However, when developing a mobile device website, we need ideal viewport. How can we get the ideal viewport? This is the turn of the meta tag.
When developing a mobile device website, the most common action is to copy the following to our head Tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
The meta tag is used to make the current viewport width equal to the width of the device, and manual scaling is not allowed. Users may not be allowed to zoom in or out different websites, but the viewport width must be equal to the width of the device. This should be the effect everyone wants, if you do not set this way, the default viewport wider than the screen will be used, that is, the horizontal scroll bar will appear.
What are the functions of this meta tag named viewport?
The meta viewport label was first introduced by Apple in its safari browser to solve the viewport problem of mobile devices. Later, Android and various browser vendors followed suit and introduced support for meta viewport, which proved to be very useful.
In Apple's specifications, meta viewport has six attributes (for the moment, those in content are called attributes and values), as follows:
| Width |
SetLayout viewportIs a positive integer or string "width-device" |
| Initial-scale |
Set the initial scaling value of the page to a number with decimals. |
| Minimum-scale |
The minimum scaling value of a user, which is a number with decimal digits. |
| Maximum-scale |
The maximum scaling value of a user, which is a number with decimal digits. |
| Height |
SetLayout viewportThis attribute is not important to us and is rarely used. |
| User-scalable |
Whether to allow scaling. The value is "no" or "yes". "no" indicates no, and "yes" indicates allow. |
These attributes can be used at the same time, or separately or in combination. Separate multiple attributes with commas.
In addition, Android also supports the private attribute target-densitydpi, which indicates the density level of the target device and determines the number of physical pixels represented by 1px in css.
| Target-densitydpi |
The value can be a value or one of the high-dpi, medium-dpi, low-dpi, and device-dpi strings. |
In particular, when target-densitydpi = device-dpi, 1px in css is equal to 1px in physical pixels.
This attribute is only supported by Android, and Android has decided to discard the target-densitydpi attribute, so we should avoid using this attribute.
5. Set the current viewport width to the ideal viewport width.
To obtain the ideal viewport, you must set the default layout viewport width to the screen width of the mobile device. Because the width in meta viewport can control the width of layout viewport, we only need to set the width to the special value of width-device.
<meta name="viewport" content="width=device-width">
Is the test result of this Code on various mobile browsers:
We can see that all browsers can change the current viewport width to the ideal viewport width through width = device-width, but note that on the iphone and ipad, whether the screen is portrait or landscape, the width is the ideal viewport width when the screen is portrait.
It seems that no one has ever eaten pork. No one has ever seen a pig running ~, Indeed, no matter what viewport you don't understand when developing a webpage on a mobile device, you may only need such a code.
But you certainly do not know
<meta name="viewport" content="initial-scale=1">
This code can achieve the same effect as the previous code. You can also change the current viewport to ideal viewport.
Haha, it's dumb, Because theoretically, the function of this Code is not to scale the current page, that is, the size of the page. So why is the effect of width = device-width?
To understand this, you must first understand what the scaling is relative to, because the scaling value here is 1, that is, there is no scaling, but it achieves the ideal viewport effect. Therefore, there is only one answer. The scaling is relative to the ideal viewport. When the ideal viewport is scaled 100%, that is, when the scaling value is 1, will the ideal viewport be obtained? Facts prove that this is indeed the case. When the browser of all major mobile terminals is configured
<meta name="viewport" content="initial-scale=1">
Whether to convert the current viewport width to the ideal viewport width.
Test results show that initial-scale = 1 can also change the current viewport width to the ideal viewport width, however, for IE on windows phone, whether it is a portrait screen or a landscape screen, the width of ideal viewport is set to the width of the portrait screen. But this little flaw is irrelevant.
But what if the 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 indicates that the current viewport width is set to 400px, and initial-scale = 1 indicates that the current viewport width is set to ideal viewport width, which command should the browser obey? Is it the one that follows the writing order? No. In this case, the browser will take the larger values of the two. For example, if width = 400 and ideal viewport is 320 in width, the value is 400. If width = 400 and ideal viewport is 480 in width, the width of ideal viewport is used. (Ps: In the uc9 browser, when initial-scale = 1, regardless of the width attribute value, the width of the viewport is always the width of the ideal viewport)
Finally, we need to set the current viewport width to the width of ideal viewport. You can set either width = device-width or initial-scale = 1, however, each of the two has a small defect, that is, the iphone, ipad, and IE will be in portrait mode, regardless of whether the screen is horizontal or vertical. The ideal viewport width of the portrait screen prevails. Therefore, the most perfect way to write is to write both of them, so that initial-scale = 1 solves problems with the iphone and ipad, width = device-width solves the IE problem:
<meta name="viewport" content="width=device-width, initial-scale=1">
6. More about meta viewport
1. default values for scaling and initial-scale
First, let's discuss the scaling problem. As mentioned above, scaling is relative to ideal viewport. The larger the scaling value, the smaller the current viewport width, and vice versa. For example, in iphone, the width of ideal viewport is 320px. If initial-scale is set to 2, the width of viewport will change to only 160px, if it is doubled, the original 1px is changed to 2px, but 1px is not changed to 2px, but the actual width remains unchanged, the length of 1px is the same as that of 2px. Therefore, to enlarge the size by 2 times, PX is required to fill up the width. Now, only PX is required. Therefore, we can get a formula:
Visual viewport width = ideal viewport width/current scaling Value
Current zoom value = ideal viewport width/visual viewport width
Ps: the width of visual viewport refers to the width of the visible area of the browser.
Most browsers comply with this theory, but there are some problems with native browsers and IE on Android. The webkit browser provided by Android is normal only when initial-scale = 1 and the width attribute is not set, which is equivalent to this theory in it; IE does not discard the initial-scale attribute at all. No matter what you set for it, initial-scale always shows 1 effect.
Now let's talk about the default value of initial-scale. What is the default value of initial-scale when this attribute is not written? Obviously it won't be 1, because when initial-scale = 1, the current layout viewport width will be set to the ideal viewport width, but as mentioned above, the default layout viewport width of each browser is generally 980, 1024, 800, and so on. It is the ideal viewport width at the beginning, therefore, the default value of initial-scale is certainly not 1. The default value of initial-scale on Android devices does not seem to be available, or it simply does not have a default value. You must write the display to make it work. We don't care about it, here we will focus on the default initial-scale value on the iphone and ipad.
According to the test, we can draw a conclusion on the iphone and ipad, that is, no matter what width you set for layout viewpor, but do not specify the initial scaling value, the iphone and ipad will automatically calculate the initial-scale value to ensure that the current layout viewport width is the width of the visible area of the browser after scaling, that is, there will be no horizontal scroll bar. For example, on the iphone, we do not set any viewport meta tag. In this case, the width of layout viewport is 980px, but we can see that there is no horizontal scroll bar in the browser, by default, the browser reduces the page size. According to the formula above, the current zoom value is ideal viewport width/visual viewport width, and we can get:
Current scaling value = 320/980
That is, the default value of initial-scale should be 0.33. After you specify the initial-scale value, this default value does not work.
Remember this conclusion. On the iphone and ipad, No matter what width you set for the viewport, if the default scaling value is not specified, the iphone and ipad will automatically calculate the zoom value to avoid horizontal scroll bars (or the width of the viewport is the width of the screen) on the current page.
2. dynamically change the meta viewport tag
Method 1
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">')
Method 2
Use setAttribute to change
<meta id="testViewport" name="viewport" content="width = 380"><script>var mvp = document.getElementById('testViewport');mvp.setAttribute('content','width=480');</script>
A bug in Android 2.3 Browser
<Meta name = "viewport" content = "width = device-width"> <script type = "text/javascript"> alert(document.doc umentElement. clientWidth); // The 600, normally, 320 </script> <meta name = "viewport" content = "width = 600"> <script type = "text/javascript"> alert(document.doc umentElement. clientWidth); // The value 320 is displayed. Normally, the value 600 is displayed. </script>
The tested mobile phone ideal viewport is 600 Px in width. The value displayed for the first time is 320, but this value should be the result of the meta tag of the first line. The value displayed for the second time is, this is the effect of the first line of meta tag, so in Android 2.3 (maybe all 2. if you overwrite or modify the meta viewport label in the browser that comes with Version x, the results will be confusing.
VII. Conclusion
After talking so much nonsense, it is necessary to summarize some useful information.
First, if the meta viewport label is not set, the default width of the browser on the mobile device is 800px, 980px, 1024px, and so on, which is greater than the screen width. The Unit px used here is the px in css, which is not the same as the px representing the actual physical pixels on the screen.
2. Each mobile device browser has an ideal width. The 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 Desired width. If you do not know the ideal width of the device, use the special value "device-width, initial-scale = 1 also sets the viewport width to the ideal width. Therefore, we can use
<meta name="viewport" content="width=device-width, initial-scale=1">
To get an ideal viewport (that is, the ideal viewport mentioned above ).
Why do we need an ideal viewport? For example, the ideal viewport width of a mobile phone with a resolution of 320x133 is 320px, while the ideal viewport width of a mobile phone with the same screen size but a resolution of 640x960 is also 320px, why is the ideal width of the mobile phone with a large resolution the same as that of the mobile phone with a small 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 mobile phones with different brands and different resolutions on the market, their ideal viewport widths are simply 320, 360, 384, and 400, all of them are very close, and the close of the ideal width means that the website we make for a device's ideal viewport will not be very different or even the same performance on other devices.
