This pixel is non-pixel

This article is translated by 99 according to Patrick H. Lauke's "A pixel is not a pixel" is not a pixel, the entire translation with our own understanding and thought, if the translation is bad or wrong place also please peer friends pointing. If you want to reprint this translation, please specify the English source: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html, as well as the author's relevant information

Author: Patrick H. Lauke

Translator: 99

This article explains the differences between CSS pixels and device-like, media queries and viewport on the recognition device pixels, and the impact of the iphone's resolution on our web front end.

In the translation of this article, the article a lot of knowledge refers to God Fly "mobile terminal webapp development Necessary knowledge" and www.MyException.Cn "what is viewport, why need viewport". I would like to express my heartfelt thanks to the author.

Translator:--99

Yesterday, in an article from John Gruber, the latest iphone boosted pixel density (960x640 instead of 480x320) and analyzed why Apple did it, and he raised a question about how it would affect web developers.

I've been delving deeply into the wide-spread performance of mobile across browsers, so to speak, in 99%, Apple will not have any impact on web developers.

But the rest of the 1% is more of a sore egg, but I expect Apple to use an intermediate transition pixel layer like Android to solve this problem. (John points out) there is such a layer in Android.

First of all, I want to make it clear that "standard size" is useless for web developers, so I'm ignoring this and I'm not going to discuss the details of the show and some of the other complex issues, so I'm sorry to say that some of these concepts may not be very professional.

What do Web developers really need?

Before we start, let's look at the difference between CSS pixels and device pixels: css pixels: The abstract unit used by the browser, used primarily to draw content on a Web page. Device pixels: Displays the smallest physical unit of the screen, with each DP containing its own color and brightness.

--99

I'm sure that for web developers, they need "css pixels", which are like PX in CSS statements such as width:300px and font-size:14px.

The PX in CSS is not related to the PX of the device itself, even if the so-called "intermediate transition layer" appears in the future, the result is the same. This is an abstract concept that is specifically presented to web developers.

The process of zooming through the page, we can clearly understand this truth. If we zoom in on the page, a width:300px element will occupy a larger space on the screen, which will, of course, occupy more of the device (physical) pixels. The pixels in the CSS are always 300px. The magnifying effect is to extend each CSS pixel as much as possible, making it occupy more screen space.

When the zoom ratio is 100%, a CSS pixel is the same as a device pixel (the intermediate transition layer provided in the future replaces "device Pixels"). The following picture represents the current state when the CSS pixels overlap with the device pixels.

(To remind you that scaling 100% is meaningless in web development, the zoom level doesn't make any sense to us.) What we need to know is how many pixels are currently on the adaptation screen. )

The following two images illustrate what happens when we zoom the page. In the first picture, the user shrinks the page, observing the light pixel blocks (css pixels) and dark pixel blocks (device pixels). At this point the CSS pixels are smaller, and one device pixel may overwrite multiple css pixels.

The second picture is the opposite of the above, when the user enlarges the page, the CSS pixel becomes larger, so a CSS pixel covers multiple device pixels

Therefore, the element is still 300px (CSS pixels) and the number of device pixels covered by the element at this point is determined by the current zoom ratio.

You can get to this ratio by calculating the ratio of screen.width to window.innerwidth on the iphone. There are a lot of annoying compatibility issues here. In addition, Web developers do not need to think too much about this ratio, but also pay attention to how pixels fit the screen.

Window.innerwidth here represents the window width, screen.width represents the screen resolution.

Here everyone can do an experiment to understand, you can in the page 100% when the print screen.width and Window.innerwidth will find is 1:1. And we use the browser zoom function, reduce the page, found Screen.width unchanged, window.innerwidth, meaning that the same screen can accommodate more CSS pixels, enlarge the page just the opposite.

--99

The above principle is not changed. As a result, the perfect Web page on the iphone, which could become unrecognizable to the high-device pixel iphone, is what Apple is trying to avoid.

As a result, the page will still be rendered in 980px, but how many device pixels are occupied. Goodness knows.. those things that are more painful than eggs

There are two more troublesome things: "Device-width" in the media query and "<meta name=" viewport "width=" Device-width "/>" in the HTML tag. Both are related to devices, but not to CSS pixels, because they are defined based on what the page is showing, not what CSS is inside. Media Enquiry

Device-width This media query can measure device pixels. Width This media query can measure the total width of the page, but this is the CSS pixel. This number is generally more than 980 on the iphone, for reasons I'll explain later.

Device-width This media query is defined in the following way

Div.sidebar {
  width:300px;
}

@media all and (max-device-width:320px) {
  //styles assigned when device width is smaller than 320px;
  Div.sidebar {
    width:100px;
  }
}

Using CSS to define the width, sidebar now has a width of 300px (css pixels), but after media queries, when the device width is less than 320 pixels (device pixels), the trigger condition, the sidebar width changes to 100px (CSS pixels) (also follow no, does compare around).

Media queries in CSS3 has added a lot of press queries, and you can add expressions of different media types to check if the media meets certain conditions, and if the media meets the appropriate criteria, the corresponding style sheet is called. In other words, "in CSS3 we can set different types of media conditions, and according to the corresponding conditions, to the corresponding conditional media call corresponding style sheet."

For media Queries Introduction and usage, you can refer to the following: CSS3 media Queries ipads and Ipones media Queries CSS3 media Queries templates use EM units to create CSS3 media Que Ries responsive design and the combination of CSS3 Media queries

--Desert

You can also theoretically use media queries to identify screens based on centimeters and inches. (@media all and (max-device-width:9cm)). Unfortunately, most of the cases are not supported, including the iphone. This is because, in many cases, the physical dimensions (such as inches) are "translated" into CSS dimensions by the system. I tested most browsers an inch would be considered 96px (CSS pixels). Therefore, according to the physical size of the media query, the result is no reference value.

The physical size here is a specific term called DPI, compared to the device pixel.

The PPI, sometimes called dpi, represents the number of pixels (pixel) per inch, the higher the value, which means that the display can display the image at a higher density. (Note: The pixels here refer to device pixels.) ）

Note that this is still a parameter in the device and is not related to CSS pixels. But Mediaquery is a CSS pixel.

--99 <meta> Tags

The introduction of META tags can refer to the article "<meta>", but our main application is the viewport tag, you can refer to the "Using the viewport meta tag to control layout on mobile Browsers "article.

--99

In most cases <meta name= "viewport" width= "device-width" > This tag is more than the above. Viewport originated from Apple, but is now supported by the vast majority of mobile browsers. This label can be used to make your layout viewport fully adaptable to the device width.

What is layout viewport exactly?

The article here is relatively simple to write, but not good for translation. I'll tell you about viewport.

Two concepts, visual viewport and layout viewport.

Here visualviewport can be thought of as the device's own width, so note that when you open a 960px design Web page, the phone will scale according to the percentages in the CSS. For example, the total length of 960 pages, the navigation bar is 20%. (The actual parsing is 192px) but you can't. Each attribute is a percentage, such as the text size.

Then I use the 320px screen to open, the navigation bar has become 64px, but my font size is 12px Ah, finished, could have shown a lot of Chinese characters (192/12) now can only display 64/12 characters.

Apple has found a way to define the viewport meta tag ① in Safari in Mobile (IOS), which is to create a virtual window (viewport), and the resolution of the virtual window is close to the desktop display, Apple is positioning it as 980px②.

① In addition to different mobile browser vendors have different solutions, such as UCWeb is the use of middleware technology.

② different browser vendors for layout viewport size definitions different Safari iphone:980px opera:850px Android webkit:800px ie:974px

For Safari under a generation iphone:

On the iphone's 320px physical screen-the visual window (visual viewport), a 980px virtual window is created-the Layout window (viewport), in the Visual window (visual viewport) We can drag the horizontal vertical slider or zoom out the page to achieve the best browsing effect (like a desktop browser), while the Layout window (viewport) is used for CSS rendering layout, for example, when we set a container width of 100%, The actual value of this container is 980px instead of 320px. As a result, most Web pages can be displayed on the phone screen in the form of zooming.

But............ However persuasive outsmart, when we "to" solve the problem of mobile phone, and deliberately made 320px page, tragedy occurred.

Since the iphone layout viewport defaults to 980px, the 320px wide page optimized for it can only be displayed in a scaled fashion (imagine opening a 320px page in your browser ...). You will need to set the viewport

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, User-scalable=no"/>

Define viewport as: Width is device width, initial zoom ratio is 1 time times, user scaling is forbidden.

This is a deliberate abandonment of the practice of viewport, we must understand this truth. Let's get to the rest:

The normal page (960,980) is poorly displayed. Apple to develop viewport, we ask designers to design 320px Web pages

Well, Apple developed viewport, the previous bad page can see, at this time, we put on 320px page, I rub, how changed so small.

Change back. Content= "Width=device-width is the process ...

For more Viewport knowledge, refer to the Using the Viewport and the responsive new home device adaptation (devices adaptation) summary

--99

Layout viewport is generally larger than the device screen. The picture below lets the Web page be covered directly on the screen, so you can see how big the window is.

When we use <meta name= "viewport" width= "Device-width" >, the page viewport is forced to stretch to the screen width, such as the iphone.

This determines how wide your Web viewport will fit on the screen. When your Web page is designed to be 320px wide, as in the image below, you don't use width and meta tags, and the page is scaled. The following figure:

This kind of screen certainly can't read. If you want the font size to fit the screen, the META tag will be on the show. When you add this tag, the viewport automatically adjusts to the screen size (e.g. iphone becomes 320px)

Apple's Change

We go back to the beginning of the question, and when Apple's screen pixels increase, it will affect the media query we mentioned above and the META tag. I'm certainly not sure, but I don't want to have any impact on web development.

<meta> tags

The META tag is a good thing to say, it's an apple-invented label that has been pushed to the web developer for the original page to fit the Apple screen. This means that Apple will not change the device pixel value identified by the META tag.

In fact, Nexus One is a stranger. The screen width is 480px on the vertical screen, while the screen width identified by the app Meta tag is 320px, which is 2/3 of the actual screen width.

Why is there a nexus problem?

Width=device-width

In fact, this property & value is very interesting, the literal meaning should be viewport width equals the device width, but in actual different browsers have given a fixed value: 320px; This value is still from Apple, because the earlier iphone resolution is 320pxx480px, A large number of websites tailored for the iphone are viewport:width=device-width and designed to be 320px wide, When joining viewport support with other browsers for compatibility will also be device-width defined in order to 320px.

--99

If I understand correctly, this is why the nexus is missing 1/3 pixels when it displays the page. This is consistent with the Nexus's interpretation of the meta tag. (because it is recognized as 320.) ）

So Google inserted a middle tier in order to solve the problem. This layer "layer is named": "Device independent layer". This layer is between the actual screen and the CSS page we developed.

I expect the iphone will also take a nexus approach, build the middle tier, and keep the META tag identified as still 320px (half of the actual pixel) (the author means so we don't have to change the page)

Media Enquiry

Device-width is still in the hardest hit areas. Although the Nexus recognizes the 480px as the device width, I still think 320px will be more suitable. We look at what Apple does.

The fundamental problem is that device-independent pixels (dips) continue to be applied in media queries. We certainly look forward to the application of this thing, because the size of the device we do not care about, we just want to understand what we are showing from the screen, dips should be suitable for this.

Why does dips have this effect? Here is a concept to be introduced.

Window.devicepixelratio is the ratio of physical pixels and device independent pixels (device-independent pixels (dips)) on the device.

The formula means: Window.devicepixelratio = physical pixels/Dips

Details of everyone can refer to: "Device pixel than Devicepixelratio simple Introduction" article.

——