What are viewport and device-width?

Mobile Web development has been around for more than a year, during which some confusing things have been encountered. Like what:

1. We often use in the viewport exactly what meaning, here device-width and we use JS to get to the screen width of the difference and the connection is what, why remove the <meta/> Label page will become very small and small?

2. <meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no ">

3. Why a lot of resolution of the screen width is not large, screen resolution and the use of JS to get to the screen width of the difference and contact is what?

And so on, a series of questions about "Pixels" and "width".

Recently I've turned over a lot of information to find out about the "width" and "pixel" things, and finally feel a little enlightened, here to share some of my understanding, to ask you for criticism and correction. Of course, the article also refers to other articles in the sentence. At the end of the article will be a reference to some of the article links posted, for everyone to reference ~

CSS pixel with device pixels (CSS px and device px)

First of all understand what is CSS pixels/' pɪks (ə) L; -sel/, what is device pixels;

1. CSS pixels can be interpreted as CSS pixels, which are abstract units used by browsers and are used primarily to draw content on a Web page. It can also be said that CSS PX is specifically for the web developer of an abstract concept, but also with our usual writing CSS style, and resolution (such as 720px*1280px) in the PX does not matter.

2. Device pixels can be understood to be equipment pixels, the official explanation is: Display the smallest physical unit of the screen, each DP contains its own color, aspect and so on.

For the people we do web development, the most we use is "css pixels", that is, similar to width:300px;font-size:14px, which is used in CSS statements. It is not related to the PX of the device itself. That is to say 1 css pixels to occupy how many physical pixels is indeterminate, this question is easy to understand through the page's indentation. For example a normal HTML page, there is a 300px element, if we enlarge the page, the element will occupy more device pixels (i.e. device pixels), but its CSS pixels unchanged, is still 300px; Shrinking the page is the same thing, Takes up fewer device pixels, but its css pixels unchanged. That is, the number of device pixels that the element occupies is determined by the scaling of the current page.

However, the scale of the page does not seem to make any sense to our web development. But there is a problem, we developed the page is to be in each screen in the best style to show, we can not let the page there is no control elements. So there it was: <meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale= 1.0 "/> is the viewport we often use for web development. So viewport is what is a thing, and content inside width why to equal device-width it, device-width is a what concept? Let's take a look at what these two brothers are.

Viewport and Device-width

Before explaining these two concepts, first of all, we all know, but do not understand why: put a normal HTML page developed on the PC directly on the phone, you will find that no matter how large the page can be displayed on a small mobile phone screen, but the graphics and text will be displayed particularly small If you use JavaScript to get the page width, you will find that most of the page width is 980px, which is related to viewport.

Viewport originated from Apple, but is now supported by most browsers. About viewport there are two concepts of visual viewport and layout viewport. Here visual viewport is the visual window that can be understood as the device's own width. At this point, if you have a page with a length of 960, an element is 20% (the actual parsing is 192px). But if I open it with a 320px wide screen, this element will be 64px, but this time I set the font size is 12px, on the 320px screen can only display 64/12 characters ~

With this in mind, Apple has found a solution that defines the viewport meta tag in the mobile version of Safari, which is created as a virtual window (viewport), which is the layout viewport resolution close to the desktop display, Apple is positioning it as 980px. On the phone, you can get it via document.documentElement.clientWidth.

Other browser vendors also have different solutions, such as UCWeb is the intermediate technology used.

It is also said that different browser vendors have their own definition of layout viewport size. However, I use a few mobile phones (Xiaomi 2s, SONY, Gionee, ipad) test results, are 980px. One of the Xiaomi 2s test on the Xiaomi bring browser, QQ browser, UC Browser, Google Browser, as well as Opera browser, the results are the same, the other mobile phone above no matter what browser, are tested, the results are 980px. But this value seems to be of little use to our web development.

Because most of the situation, <meta name= "viewport" content= "width=device-width"/> This tag is the most force for us, can let our page text display is normal, The readability of the page has been improved to a great extent. The function of this meta tag is to set the width of layout viewport to Device-width. But what exactly is Device-width?

The first generation of the iphone, the resolution is 320*480, the screen size is 3.5 inch (note that this 3.5-inch is the diagonal width of the screen), this time Device-width is 320px, is also the resolution of the phone wide, device-width is the device wide. But the second generation of the iphone resolution to 480*960, screen size is still 3.5 inches, if the device-width or device width, then the same 320px page put 480*960 mobile phone screen, the text will become smaller, and will affect its readability. So the iphone's device-width has been maintained at 320px,ipad for 1024PX. At this time, Device-width is not a device wide (also not the width of the resolution), is an intermediate layer. Android also uses this concept, its device-width value is 360, but there are many such as 540px and 600px such a wonderful. After setting the <meta/> Tag, the device-width value can be window.innerwidth to get the Device-width value.

About DPI

DPI (Dots per inch), sometimes called PPI (point Per inch), is also called pixel density, which indicates the number of pixels per inch of the device, and the higher the value, the higher the density of the display to show the image. (Note: The pixels here refer to device pixels.) ) The calculation formula for DPI:

Interestingly, the value is a little bit higher than the 326 published on the Apple website.

Among them, the PPI in 120-160 between the cell phone is classified as low-density mobile phones, 160-240 is classified as medium density, 240-320 is classified as high density, more than 320 is classified as ultra-high density (Apple gave it an upper name--retina).

These densities correspond to a specific scaling value, and the PPI is 326 for ultra-high-density phones, as we are most familiar with iphone4 or 4s. When we write a page with a width of 320px and put it on the iphone, you'll find that it's full-width. This is because the page is magnified by default by twice times, that is, 640px, and iphone4 or 4s width, it is 640px.

Devicepixelradio

Devicepixelradio, definition: Window.devicepixelratio is the ratio of physical pixels (that is, device-width) and device independent pixels (device-independent pixels, or dips) on the device. The formula means: Window.devicepixelratio = physical pixel/dips

Android and IPhone have a conversion unit for the entire screen size, called a dip or Dp,iphone in Android. DIP, the device independent pixels, is a standalone pixel. The physical pixel and dip ratio of the device is devicepixelratio, and this value can be obtained through the Window.devicepixelratio property.

According to some of the information I have found, the value of the independent pixel here is actually the device-width value. This value is the width of the layout we usually use on the phone, of course, under the premise of setting the <meta/> tag.

Why is the concept of devicepixelratio mentioned here?

Because when the devicepixelratio=1.5, That is to say, when the screen resolution width and device-width ratio of 1.5, some mobile phone's own browser (especially Samsung phones appear at the most) will appear 1px line resolution to 2px bug, but tested the same phone installed on the UC browser will not generally have this bug. On this bug, there is an article on the internet to do a better explanation:

"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial