Viewport topic: In-depth understanding of the responsive Web design in CSS-viewport

To reconstruct or develop a webpage on a mobile device, the first thing to figure out is the viewport on the mobile device, only to understand the concept of viewport and to figure out the use of META tags related to viewport, To better enable our web pages to fit or respond to a variety of different resolutions of mobile devices.

First, the concept of viewport

In layman's parlance, the viewport on a mobile device is the area of the device's screen that can be used to display our pages, and, in particular, the portion of the area that the browser (or possibly an app WebView) uses to display the page. But viewport is not limited to the size of the viewable area of the browser, 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, the viewport on a mobile device is generally larger than the viewable area of the browser, because the resolution of the mobile device is relatively small compared to the desktop, so that the traditional Web site designed for desktop browsers can be displayed properly on mobile devices. Browsers on mobile devices will set their default viewport to 980px or 1024px (and possibly other values, as determined by the device itself), but with the result that the browser will appear with a horizontal scroll bar, Because the width of the viewable area of the browser is smaller than the width of this default viewport. Lists the width of the default viewport for browsers on some devices.

Second, 1px in CSS is not equal to the 1px of the device

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

There is also a factor that will cause the change of PX in CSS, that is, user zoom. For example, when the user enlarges the page by one time, the physical pixels represented by 1px in the CSS will also increase by one time, whereas the physical pixels represented by 1px in the CSS will be reduced by a factor of one time. I'll talk about that in the later part of the article.

In the mobile browser and in some desktop browsers, the Window object has a Devicepixelratio property, which is officially defined as the ratio of the physical pixels of the device to the device's independent pixels, i.e. Devicepixelratio = physical pixels/independent pixels. The PX in the CSS can be seen as a separate pixel for the device, so by devicepixelratio we can see how many physical pixels the previous CSS pixel represents on the device. For example, on the iphone of the retina screen, the value of Devicepixelratio is 2, which means that 1 css pixels are equivalent to 2 physical pixels. However, it is important to note that Devicepixelratio has some compatibility problems in different browsers, so we still can't trust this thing completely, and we can look at this article in detail.

Test results for Devicepixelratio:

Three, PPK's theory about three viewport

PPK great God for mobile devices on the viewport have a lot of research (first, second, third), interested students can go to see, this article has a lot of data and ideas from there. PPK that there are three viewport on the mobile device.

First, the browser on the mobile device thinks that it must be able to display all of the sites properly, even those that are not designed for mobile devices. But if the visual area of the browser as a viewport, because the mobile device screen is not very wide, so those designed for desktop browsers on the mobile device display, it is inevitable because the mobile device viewport too narrow, and squeeze a group, even the layout of anything will be messy. Some people may ask, now is not a lot of mobile phone resolution is very large, such as 768x1024, or 1080x1920, then such a phone used to show the desktop browser design site is not a problem? As we have already said, the 1px in CSS does not represent the 1px on the screen, the larger the resolution, the more physical pixels in the CSS will be represented by 1px, and the greater the value of the Devicepixelratio, which is well understood, because your resolution is increased, but the screen size does not grow much, The 1px in the CSS must represent more physical pixels in order to make 1px of things on the screen the same size as those of low-resolution devices, or it will be too small to see. So on a device like 1080x1920, by default, you might just set the width of a p to more than 300 px (depending on the value of Devicepixelratio), which is the width of the full screen. Back to the point, if the mobile device on the visual area of the browser is set to viewport, some sites will be viewport too narrow to show confusion, so these browsers decided by default to set viewport to a wider value, such as 980px, In this way, even those websites designed for the desktop can be displayed on the mobile browser normally. PPK The default viewport of this browser is called layout viewport . the width of this layout viewport can be obtained by document.documentelement.clientwidth .

However, the width oflayout 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 this viewport is called Visual viewport . The width of the visual viewport can be obtained through window.innerwidth , but not correctly in Android 2, Oprea Mini and UC 8.

Now we have two viewport:layout viewport and visual viewport. But browsers don't think it's enough, because more and more websites are being designed individually for mobile devices, so there has to be a viewport that fits perfectly with mobile devices. The so-called perfect adaptation refers to the fact that the user will not need to zoom and horizontal scroll bar to view all the contents of the site, and secondly, the size of the displayed text is appropriate, such as a 14px size of text, not because in a high-density pixel screen is too small to see, Ideally, this 14px of text, regardless of the density of the screen, at what resolution, the size of the display is similar. Of course, not just text, other elements like pictures and so is the truth. PPK called this viewport the ideal viewport, the ideal viewport--for a third viewport mobile device.

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

But the Android device is more complex, there are 320px, 360px, 384px, and so on, about the different devices ideal viewport the width of how much, you can go to http://viewportsizes.com to see, which collects the ideal width of many devices.

To sum up: PPK on mobile devices viewport divided into layout viewport , visual viewport and ideal viewport three categories, of which the ideal Viewport is the most suitable mobile device viewport,ideal the width of the 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 ideal viewport width (units with px), Then the width of this element is the width of the device screen, which is the effect of a width of 100%. The significance of ideal viewport is that, regardless of the resolution of the screen, those designed for ideal viewport site, do not need the user manual scaling, and do not need to appear horizontal scroll bar, can be perfectly presented to the user.

Iv. using META tags to control viewport

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

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

What exactly is this meta tag named viewport, and what does it do?

The meta viewport tag was first introduced by Apple in its Safari browser to address the viewport problem of mobile devices. Later on, Android and the big browser vendors followed suit and introduced support for Meta viewport, which proved to be very useful.

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

	set layout viewport width as a positive integer, or string "Width-device"
Set the initial zoom value of the page to a number that can be With decimal
allows the user's minimum zoom value to be a Number, with decimal
maximum zoom value allowed for user , for a number, you can take decimal
settings layout viewport the height of , this property is not important to us, rarely use
user-scalable	Whether the user is allowed to scale, the value is "no" or "yes", no is not allowed, and yes means allow

These properties can be used at the same time, or they can be used alone or mixed, and multiple properties are separated by commas when used simultaneously.

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

target-densitydpi

The value can be a number or high-dpi, medium-dpi, low-dpi, device-dpi one of several strings

In particular, when target-densitydpi=device-dpi, 1px in CSS is equal to 1px in physical pixels.

Because this property is only supported by Android, and Android has decided to discard the target-densitydpi attribute, this property should be avoided.

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

To get ideal viewport you must set the default layout viewport width to the screen width of the mobile device. Since width in meta viewport controls the width of the layout viewport, we just need to set width to the special value of Width-device.

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

is the test result of this code on each big mobile browser:

As you can see through width=device-width, all browsers can turn the current viewport width into the width of the ideal viewport, but be aware that on the iphone and ipad, whether it's vertical or horizontal, the width is vertical, ideal The width of the viewport.

This kind of writing looks who will do, have not eaten pork, who has not seen a pig run ah ~, indeed, we are developing mobile devices on the page, whether you do not understand what is viewport, perhaps you 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 to ideal viewport.

Oh, dumbfounded, because theoretically speaking, the function of this code is just not to the current page to zoom, that is, how big the page is. Then why does it have a width=device-width effect?

To figure this out, first you have to figure out what this scaling is relative to, because the scaling value here is 1, which is not scaled, but it achieves the effect of ideal viewport, so the answer is only one, scaling is relative to the ideal viewport to zoom, When the ideal viewport 100% zoom, that is, the scale value of 1, do not get the ideal viewport it? It turns out that's true. Is the big mobile browser when set <meta name= "viewport" content= "initial-scale=1" > whether the current viewport width can be changed to ideal viewport The width of the test results.

The test results show that initial-scale=1 can also change the current viewport width to the width of ideal viewport, but this time it is the turn of IE on the Windows Phone, whether vertical screen or horizontal screen is set to the width of the vertical screen ideal The width of the viewport. 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? Like what:

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

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

Finally, to summarize, to set the current viewport width of the width of ideal viewport, can not only setup width=device-width, can also set initial-scale=1, but both have a small flaw, is the iphone, The ipad and IE will not be divided into vertical screen ideal viewport width. Therefore, the most perfect writing should be, both write up, so that initial-scale=1 solve the problem of the iphone, ipad, Width=device-width solve the problem of IE:

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

Vi. additional knowledge on meta-viewport

1. Default values for scaling and Initial-scale

First, let's discuss the problem of scaling, as mentioned earlier, scaling is scaled relative to ideal viewport, the larger the zoom 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 the initial-scale=2, the width of the viewport will change to only 160px, this is understood, magnified a little, is the original 1px of things into 2px , but 1px to 2px is not the original 320px into 640px, but in the actual width of the case, the 1px has become the same length as the original 2px, so zoom in twice times the original need 320px to fill the width now only need 160px to do. Therefore, we can draw a formula:

Visual Viewport width = Ideal viewport width  /Current zoom value Current zoom value = Ideal Viewport width  /visual viewport width

The width of the ps:visual viewport refers to the width of the viewable area of the browser.

Most browsers conform to this theory, but there are some problems with native browsers and IE on Android. Android's WebKit browser only behaves normally when Initial-scale = 1 and does not have the Width property set, which is essentially useless on the theory, and IE does not dump Initial-scale this attribute, no matter what you set him, The effect of Initial-scale's performance is always 1.

OK, now again the default value of the Initial-scale, that is, when the property is not written, its default value will be how much? Obviously not 1, because when Initial-scale = 1 o'clock, the current layout viewport width will be set to ideal viewport width, but the front says, the default layout viewport width of each browser is generally 980 ah, 1024 Ah, 800 ah, wait. These values, no beginning is the width of the ideal viewport, so the default value of Initial-scale is certainly not 1. Initial-scale default on Android device it seems that there is no method to get, or simply it does not have a default value, it must be shown that you write this thing will work, we don't care about it, Here we focus on the Initial-scale default values on the iphone and ipad.

According to the test, we can get a conclusion on the iphone and ipad that the iphone and ipad automatically calculate the value of Initial-scale, regardless of the width you set for the layout viewpor, without specifying the initial zoom value. To ensure that the width of the current layout viewport is scaled to the width of the viewable area of the browser, that is, the horizontal scroll bar does not appear. For example, on the iphone, we do not set any viewport meta tags, at this time the layout viewport width of 980px, but we can see the browser does not appear the horizontal scroll bar, the browser default to the page reduced. Based on the formula above, the current zoom value = Ideal viewport width/visual viewport width , we can draw:

Current ZOOM value = 320/980

That is, the current Initial-scale default value should be 0.33. When you specify a value for Initial-scale, this default value will not work.

In short, remember this conclusion: on the iphone and ipad, no matter how wide you set the viewport, if you do not specify a default scaling value, the iphone and ipad will automatically calculate this scaling value to reach the current page without a horizontal scroll bar ( Or the width of the viewport is the width of the screen).

2. Dynamically change meta viewport tags

The first of these methods

You can use document.write to dynamically output meta viewport tags, such as:

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

The second method of

Through 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 on Android 2.3 comes with a browser

<meta name= "viewport" content= "Width=device-width" ><script type= "Text/javascript" >alert ( Document.documentElement.clientWidth); Eject 600, normal should pop 320</script><meta name= "viewport" content= "width=600" ><script type= "text/ JavaScript ">alert (document.documentElement.clientWidth); Eject 320, the normal situation should pop 600</script>

Test the phone ideal viewport width of 320px, the first pop-up value is 600, but this value should be the result of the row meta tag ah, and then the second pop-up value is 320, this is the first row of meta tags to achieve the effect ah, so on Android 2.3 ( Perhaps in all 2.x versions of the browser, the meta viewport tag is overwritten or changed, resulting in a very confusing result.

Vii. Conclusion

To say so much nonsense, finally it is necessary to summarize a little useful out.

First, if you do not set the meta viewport tag, the default width value of the browser on the mobile device is 800px,980px,1024px and so on, which is larger than the screen width. The unit px used for the width here refers to the PX in the CSS, which is not the same as the PX representing the actual screen physical pixels.

Second, each mobile device browser has an ideal width, this ideal width refers to the width of the CSS, and the physical width of the device is not related, in the CSS, this width is equivalent to 100% of the width of the represented. We can use the META tag to set the width of the viewport to that ideal width, if you do not know what the ideal width of the device, then use the Device-width this special value on the line, at the same time initial-scale= 1 also has the effect of setting the width of the viewport 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, ideal viewport).

Why is it necessary to have an ideal viewport? For example, a mobile phone with a resolution of 320x480 ideal viewport width is 320px, and another screen size is the same, but the resolution of 640x960 phone's ideal viewport width is 320px, Then why the resolution of the phone's ideal width of the cell phone with a small resolution of the ideal width of the same? This is because it is the only way to ensure that the same site looks the same or similar on devices with different resolutions. In fact, although there are so many different types of different brands of mobile phones, but their ideal viewport width summed up is no more than 320, 360, 384, 400, and so on, are very close, The close proximity of the ideal width also means that the site we make for the ideal viewport of a device does not perform as much or even as it does on other devices.

"Recommended"

1. Special recommendation : "PHP Programmer Toolkit" V0.1 version download

2. Example code for viewport compatibility issues

3. Share the Viewport property to resolve the problem instance where the vertical screen font of the mobile end is reset

4. Viewport parameters in HTML5 and how to use them