Viewport detailed explanation

On the mobile device for the reconstruction or development of Web pages, the first thing to understand is the viewport on the mobile device, only understand the concept of viewport and the use of viewport-related meta tags, To better enable our web pages to fit or respond to a variety of different resolution mobile devices.

First, the concept of viewport

In layman's terms, the viewport on a mobile device is the area of the device on the screen that can be used to display our web page, in particular, the part of the page that the browser (and possibly the WebView in the app) uses to display the pages. But viewport is not limited to the size of the browser's viewable area, it may be larger than the viewable area of the browser, or it may be smaller than the viewable area of the browser. By default, in general, the viewport on a mobile device is larger than the viewable area of the browser, because the resolution of a mobile device is smaller than that of a desktop computer, so in order to properly display the traditional Web sites designed for desktop browsers on a mobile device, The browser on the mobile device will have its default viewport set to 980px or 1024px (and possibly other values, this is determined by the device itself), but the result is that the browser will appear horizontal scroll bar, Because the width of the viewable area of the browser is smaller than the width of this default viewport. The following illustration shows the width of the default viewport for browsers on some devices.

1px in CSS is not equal to 1px of equipment

In CSS we generally use PX as a unit, in the desktop browser CSS 1 pixels are often corresponding to the computer screen 1 physical pixels, which may cause us an illusion, that is the pixel in CSS is the device's physical pixel. But the reality is not so, the pixel in CSS is only an abstract unit, in different devices or different environments, the CSS in the 1px represented by the device physical pixel is different. In a Web page designed for desktop browsers, we don't have to worry about this jinjin, but on mobile devices we have to figure this out. In earlier mobile devices, screen pixel density is low, such as IPHONE3, its resolution is 320x480, on Iphone3, a CSS pixel is really equal to a screen physical pixel. Later, with the development of technology, the screen pixel density of mobile devices is increasing, from iphone4, Apple has launched the so-called Retina screen, the resolution increased by one times, 640x960, but the screen size has not changed, which means that the same size of the screen, the pixel is more than one times, at this time, A CSS pixel is equal to two physical pixels. Other brands of mobile devices are also the reason. For example, the Android device according to the screen pixel density can be divided into ldpi, mdpi, hdpi, xhdpi and other levels, the resolution is also a wide variety of devices, an Android pixel equivalent to the number of screen physical pixels, but also because of the different equipment, there is no conclusion.

There is also a factor that will cause the PX in the CSS changes, that is, user scaling. For example, when the user enlarges the page by one time, the physical pixel represented by the 1px in the CSS will also increase by one times; the page is reduced by one time, and the physical pixel represented by 1px in the CSS will be reduced by one times. In this regard, it will be mentioned later in the article.

In mobile browsers and in some desktop browsers, the Window object has a Devicepixelratio attribute, which is officially defined as the ratio of the device's physical pixel to the device's independent pixel, i.e. Devicepixelratio = physical pixel/independent pixel. The PX in CSS can be viewed as a stand-alone pixel of the device, so by devicepixelratio we know how many physical pixels the last CSS pixel on the device represents. For example, on the iphone on the Retina screen, the Devicepixelratio value is 2, which means 1 css pixels are equivalent to 2 physical pixels. But note that devicepixelratio in different browsers there are some compatibility issues, so we still do not fully trust this thing, the specific situation can be read this article.

Test results for Devicepixelratio:

Iii. The theory of PPK on three viewport

PPK Great God has a lot of research on mobile device viewport (first, second, third), interested students can go to see, this article has many data and views are also from there. PPK that there are three viewport on the mobile device.

    first, browsers on mobile devices think they must be able to make all sites appear correctly, even those that are not designed for mobile devices. But if you use the viewable area of the browser as a viewport, because the screen of the mobile device is not very wide, so those websites designed for the desktop browser to display on the mobile device, it is inevitable because the mobile device viewport too narrow, and crowded, even the layout of anything will be disorderly. Some people may ask, now is not a lot of mobile phone resolution is very large, such as 768x1024, or 1080x1920 so that such a mobile phone to display for desktop browser design site is no problem. As we've said before, CSS 1px does not represent the 1px on the screen, your resolution is larger, the CSS 1px represents the physical pixel will be more, devicepixelratio value is also greater, this is very good to understand, because you increase the resolution, but the screen size has not changed much, You have to have 1px in your CSS to represent more physical pixels, so that 1px is about the same size as the low-resolution device, or it's too small to see. So on devices such as 1080x1920, by default, you may just set a div width to 300 px (depending on the value of the Devicepixelratio), the width of the full screen. Back to the point, if the mobile device on the visual area of the browser set to viewport, some sites will be because the viewport is too narrow to show confusion, so these browsers decided to set the viewport by default to a wider value, such as 980px, In this way, even those Web sites that are designed for the desktop can be displayed normally on a mobile browser. PPK The default viewport of this browser is called  layout viewport. The width of the layout viewport can be obtained by  document.documentElement.clientWidth .

However, the width of the layout viewport is greater than the width of the viewable area of the browser, so we also need a viewport to represent the size of the viewable area of the browser, PPK to call this viewport visual viewport. The visual viewport width can be obtained by window.innerwidth, but it is not available in Android 2, Oprea Mini and UC 8.

Now we have two viewport: layout viewport and visual viewport. But browsers do not feel enough, because more and more Web sites are designed for mobile devices alone, so there must be a perfect fit for mobile devices viewport. The so-called perfect fit refers to the first of all, no user scaling and horizontal scroll bar will be able to view all the content of the site; second, the size of the text displayed is appropriate, such as a 14px of text, not because in a high-density pixel screen is too small to see, Ideally, the 14px text will show the same size, regardless of the density of the screen, and at what resolution. Of course, not just words, other elements like pictures or something is the truth. PPK This viewport called ideal viewport, the third viewport--mobile device ideal viewport.

Ideal viewport does not have a fixed size, and different devices have different ideal viewport. All of the iphone's ideal viewport width is 320px, whether its screen width is 320 or 640, that is, in the iphone, the 320px in CSS represents the width of the iphone screen.

But the Android device is more complex, there are 320px, 360px, there are 384px and so on, about the different equipment ideal viewport width of the number, you can go to http://viewportsizes.com to see, which collected a large number of equipment ideal width.

To summarize: PPK viewport on mobile devices into layout viewport, visual viewport, and ideal viewport, where ideal is the most suitable for mobile devices viewport The width of Al viewport is equal to the screen width of the mobile device, as long as the width of an element in the CSS is set to the width of the ideal viewport (px), then the width of the element is the width of the device screen, that is, the effect of width 100%. The significance of ideal viewport is that no matter what resolution of the screen, those designed for the ideal viewport site, do not need to manually scale the user, and do not need to appear in the horizontal scroll bar, can be perfectly presented to the user.

Iv. using META tags to control viewport

The default viewport for mobile devices is layout viewport, the viewport that is wider than the screen, but when it comes to the development of a mobile device site, we need ideal viewport. So how do you get ideal viewport? It's time for the META tag to show up.

One of the most common moves when we're developing a mobile device's web site 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 purpose of this META tag is to make the current viewport width equal to the width of the device, while not allowing the user to manually scale. May not allow users to scale different sites have different requirements, but let the width of the viewport is equal to the width of the device, this should be the effect that everyone wants, if you do not set this, it will use that than the screen width of the default viewport, that is, the horizontal scroll bar appears.

What does this name-viewport meta tag really have and what does it do?

The meta viewport tag was first introduced by Apple in its Safari browser to address viewport problems with mobile devices. The fact that Android and major browser vendors followed suit and introduced support for the meta viewport proved to be very useful.

In the Apple specification, the META viewport has 6 attributes (for the moment the content is referred to as a property and value), as follows:

Width	Sets the width of the layout viewport, either a positive integer, or a string "Width-device"
Initial-scale	Sets the initial scaling value of a page, which is a number, and can take a decimal
Minimum-scale	Allows the user's minimum scaling value to be a number, with decimal
Maximum-scale	Allows the user's maximum zoom value to be a number, with decimal
Height	Sets the height of the layout viewport, which is not important to us and rarely uses
User-scalable	Whether the user is allowed to zoom, the value is "no" or "yes", the No is not allowed, yes represents the allowed

These properties can be used at the same time, or can be used separately or in combination, and multiple properties are separated by commas when they are used at the same time.

In addition, the Andong also supports the TARGET-DENSITYDPI private property, which represents the density level of the target device, which determines how many physical pixels the 1px in the CSS represents

target-densitydpi

Values can be one of a number or high-dpi, medium-dpi, low-dpi, device-dpi these strings

Specifically, when target-densitydpi=device-dpi, the 1px in the CSS equals the 1px in the physical pixel.

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

Set the current viewport width to the width of the ideal viewport

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

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

The following figure shows the test results for this code on each of the large mobile-side browsers:

You can see through width=device-width, all browsers can change the current viewport width to ideal viewport width, but note that on the iphone and ipad, whether it is vertical screen or horizontal screen, width is the vertical screen ideal The width of the viewport.

It looks like anyone would do it, never eat pork, who has never seen a pig run ah, indeed, we are in the development of mobile devices on the page, whether you do not understand what is viewport, you may only need such a code is enough.

But you certainly don't know.

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

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

Oh, dumbfounded, because theoretically speaking, the function of this code is not the current page scaling, that is, the page should be how big is how big. Then why is there a width=device-width effect?

To be clear about this matter, first you have to figure out what this scaling is relative to, because the scaling value here is 1, which is not scaling, but it achieves the effect of ideal viewport, so the answer is only one, scaling is relative to the ideal viewport to scale, When the ideal viewport 100% scaling, that is, the scaling value of 1, do not get the ideal viewport it. It turns out that's true. The following illustration shows whether the browsers of the major mobile terminals can change the current initial-scale=1 width to the width of the viewport ideal when the <meta name= "viewport" content= "viewport" > is set.

The test results show that initial-scale=1 can also change the current viewport width to ideal viewport width, but this time it is up to Windows Phone's Internet Explorer either vertically or horizontally to set the width to the vertical screen ideal The width of the viewport. But this little flaw is irrelevant.

But if width and initial-scale=1 appear at the same time, and there is a conflict. Like what:

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

width=400 that the current viewport width is set to 400px,initial-scale=1 means the width of the current viewport is set to the width of ideal viewport, so which command should the browser obey? Is that the one in the back of the writing order? No. When this happens, the browser takes the larger value of the two. For example, when the width of the width=400,ideal viewport is 320, 400 is taken, and when width=400, ideal viewport width is 480, the width of the ideal viewport is taken. (PS: In Uc9 Browser, when initial-scale=1, regardless of the width of the value of the property, this time viewport width is always ideal viewport width)

Finally, to sum up, to set the current width of the viewport to ideal viewport width, you can either Setup width=device-width or set initial-scale=1, but there is a small flaw in both the iphone, The ipad and IE will be screen, all with the vertical screen ideal viewport width. Therefore, the most perfect way to write should be, both are written, so that initial-scale=1 solve the iphone, the ipad, width=device-width solve the problem of IE:

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

Vi. more information on meta-viewport

1, about scaling and initial-scale default values

    First let's talk about scaling, as mentioned earlier, scaling is scaled relative to ideal viewport, the larger the scaling value, the smaller the current viewport width, and vice versa. For example, in the iphone, the width of the ideal viewport is 320px, if we set initial-scale=2, then viewport width will become only 160px, it is better to understand, magnified one time, is the original 1px of things into 2px , but the 1px to 2px is not the original 320px into the red