Something about viewport and device-width ~

It has been more than a year before mobile web development, and some confusing things have been encountered. For example:

1. We often use <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, what does the viewport in user-scalable = No "> mean? What is the difference and connection between device-width and the screen width obtained using JS, why is the page small after the <META/> tag is removed?
2. Why is the difference and connection between screen resolution and screen width obtained using JavaScript?

And so on.

Recently I have read a lot of information about "width" and "pixels", and I feel a little enlightened. Here I will share some of my understanding, ask for criticism and correction. Of course, there are also sentences in other articles. At the end of the article, we will post links to some articles for your reference ~

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

First, what is CSS pixels/'P? KS (?) L;-Sel/, what is device pixels;

1. CSS pixels can be understood as CSS pixels. It is an abstract unit used by browsers and is mainly used to draw content on webpages. It can also be said that css px is an abstract concept specifically designed for Web developers. It is only related to the CSS style we usually write, and has nothing to do with PX in resolution (such as 720px * 1280px.

2. device pixels can be understood as device pixels. The official explanation is: display the minimum physical unit of the screen. Each DP contains its own color, height, and width.

For our web developers, the most used part is "CSS pixels", which are similar to width: 300px; font-size: 14px; this type of CSS statements is used. It has nothing to do with the PX of the device itself. That is to say, it is uncertain how many physical pixels a CSS pixel occupies. This problem is easy to understand through page resizing. For example, a common HTML page has a PX element. If we enlarge the page, the element occupies more device pixels, but its CSS pixels remains unchanged, it is still PX; the same principle is true for page downgrading. It occupies fewer device pixels, but its CSS pixels remains unchanged. That is to say, the number of device pixels occupied by an element depends on the scale-down ratio of the current page.

However, page scaling does not seem to make any sense for our web development. However, there is a problem that the pages we developed want to display them in the best style on each screen. We cannot make the pages contain uncontrollable elements. So it appears: <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0 "/> is the viewport that we often use during web development. So what is viewport? Why is width in content equal to device-width? What is the concept of device-width? Let's take a look at what the two of them are.

Viewport and device-Width

Before explaining these two concepts, let's first let everyone know, but don't understand Why: let a common HTML page developed on PC go directly to the machine, you will find that no matter how big a page can be displayed on a small mobile phone screen, but the text and text will be very small. If you get the page width using JavaScript, you will find that, the width of most pages is 980px, which is related to viewport.

Viewport originated from Apple, but is now supported by most browsers. There are two concepts about viewport: Visual viewport and layout viewport. Here, visual viewport is the visual window, which can be understood as the width of the device. At this time, if you have a page with a length of 960, there is an element that is 20% (actually parsed as 192px ). But if I open the screen with a width of PX, this element will become 64 PX, but at this time the font size I set is 12 PX, only 64/12 characters can be displayed on the PX screen ~

In view of this problem, Apple found a solution by defining the viewport meta tag in mobile safari. Its role is to create a virtual window (viewport ), this virtual window is the layout viewport resolution close to the desktop display, and Apple positions it as 980px. On the mobile phone, you can obtain it through document.doc umentelement. clientwidth.

Other browser vendors have different solutions. For example, ucweb is an intermediate technology.

In addition, it is said that different browser vendors have their own definitions of layout viewport sizes. However, the test results of a few mobile phones (Xiaomi 2 s, Sony, gionee, and iPad) on my hand are both 980px. The results of Xiaomi's browser, QQ browser, UC browser, Google browser, and operabrowser are the same on Xiaomi 2 S. No matter what browser is installed on other mobile phones, the results are both 980px. However, this value seems useless for web development.

In most cases, <meta name = "viewport" content = "width = device-width"/> is the most powerful tag for us, the graphic display on our page is normal, which greatly improves the readability of the page. The meta tag is used to set layout viewport to the width of device-width. But what is device-width?

For the first generation of iPhone, the resolution is 320*480, and the screen size is 3.5 (note that the 3.5 inch is the diagonal width of the screen). In this case, the device-width is 320px, the resolution width of the mobile phone. device-width indicates the device width. However, the resolution of the second-generation iPhone is increased to 480*960, and the screen size is still 3.5. If the device-width is still the device width, in this case, the 480x960 mobile phone screen is displayed on the 320px page, and the text and text will become small and affect the readability of the page. Therefore, the device-width of the iPhone remains at 320px, while that of the iPad remains at 1024px. In this case, device-width is not the device width (or the resolution width), and is an intermediate layer. Android also adopts this concept. Its device-width value is mostly 360, but there are also some wonderful features such as 540px and 600px. After the <META/> label is set, you can use window. innerwidth to obtain the device-width value.

DPI

DPI (dots per inch), also known as point per inch), is also called pixel density, indicating the number of pixels occupied by devices per inch. The higher the value, that means the display can display the image at a higher density. (Note: pixels here refer to device pixels .) Calculation Formula of DPI:

Interestingly, this value is a little higher than the 326 published on Apple's official website.

Among them, the phone number between and is classified as low-density phone number,-is classified as medium-density,-is classified as high-density, more than 320 are classified as ultra-high density (Apple gave it a high name-retina ).

These density values correspond to a specific scaling value. For the iPhone 4 or 4s that we are most familiar with, their PPI is 326, which is an ultra-high-density mobile phone. When we write a page with a width of PX and put it in the iPhone, you will find that it is actually full width. This is because the page is zoomed twice by default, that is, 640px, while the width of iPhone 4 or 4S is 640px.

Devicepixelradio

Devicepixelradio. It is defined as the ratio of physical pixels (device-width) and independent pixels (device-independent pixels (DIPS) on the device. Formula: window. devicepixelratio = physical pixel/dips

In Android and iPhone, there is a conversion unit for the entire screen size. In Android, it is called dip or DP, and in iPhone, it is called Point. Dip, that is, device independent pixels, device independent pixel. The physical pixel to dip ratio of the device is devicepixelratio, which can be obtained through the window. devicepixelratio attribute.

According to some information I have found, the value of the independent pixel here is actually the device-width value. This value is the layout width we usually use on the mobile phone. Of course, the <META/> label is set.

Why is the concept of devicepixelratio mentioned here?

Because when devicepixelratio is 1.5, that is to say, when the ratio of screen resolution width to device-width is 1.5, some mobile phones bring their own browsers (especially Samsung phones appear most frequently) the bug of parsing 1px lines to 2px occurs, but the UC browser installed on the same mobile phone is not tested to have this bug. There is an article on the Internet explaining this bug:

Https://www.imququ.com/post/devicepixelratio-and-border-width.html

 

 

Note: many of the articles refer to "essential knowledge for mobile webapp development" and "What Is viewport and why viewport". The links are:

Http://www.qianduan.net/mobile-webapp-develop-essential-knowledge.html

Http://www.myexception.cn/mobile/428756.html

And this: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Something about viewport and device-width ~