Mobile-side Layouts

"read the following articles yourself summarized below:" 0,viewport's concept comes from Apple, which was later accepted by all mobile browser vendors. 1, the mobile browser display page is displayed according to layout viewport. 2, the phone screen has four size, one is the actual physical size, generally measured by the length of the screen diagonal, such as 5-inch mobile phone;The second is the actual screen resolution, such as x 1080 pixels, which is also mentioned in the article visual viewport; third, the default layout size of the mobile browser, that is, the text mentioned in the layouts viewport, which is a virtual window, regardless of horizontal screen or vertical screen, width is set to 980px (most of them are 980px, may be part of the mobile browser is not), the height of the actual resolution ratio conversion; Four is set <meta/> label, specify Width=device-width, layout viewport size changed, Apple mobile browser specified layout viewport width of 320px, The Apple Pad Browser specifies that it is 1024px, and most Android mobile browsers specify px (with exceptions). 3, about Device-width's own understanding: first, the word can always refer to the left and right side of the screen of the phone, the length of the change is its value; start Apple 1-generation phone actual resolution is very small (480px), in order to be able to display more content, Apple has come up with a virtual window (that is, the layout viewport) created in the mobile browser, which is set to 980px in width. But sometimes want to designate the mobile phone browser as the size of the phone itself, so invented the <meta name= ' viewport ' content= ' width=device-width '/> To achieve this purpose, At this point the device-width is the actual resolution width of the phone. But the Apple 2 generation comes out, its resolution is 480 x 960px, But the actual physical size and 1 is the same as 3.5 inches, if the value of the device-width will continue to be equal to the actual resolution width of the phone, then in the 1 generation of full screen 320px elements in the 2 generation would be smaller, so Apple no longer let the value of Device-width equals the actual resolution width of the phone, but let the word fixed As a number: 320px (Pad is 1024px). Later viewport was adopted by the Android browser maker, most of them fixed the word to px. So for the mobile browser layout view, no meta tag is the width of this view is 980px, add the META tag its width is 320px or px, the height is in accordance with the actual resolution of the scale conversion.4, reference http://mobile.51cto.com/web-442588.htm something about 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 the <meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale= 1.0, User-scalable=no "> in the viewport what exactly mean, here device-width and we use JS to get to the screen width of the difference and contact is what, why remove <meta/> Will the page be small and small after the label is made?
2. 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 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 , 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 will find that it is full-width "Self-release: Layout viewport width is 320px, so 320px pages will be 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:

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

Note: The article a lot of knowledge cited the "Mobile WebApp development Necessary knowledge" and "What is viewport, why need viewport", links are:

Http://mobile.51cto.com/web-442588.htm

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

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

Mobile-side Layouts