Believe it or not! The screen width of iPhone 6 is not necessarily 375px, while that of iPhone 6 Plus is not necessarily 414px,

Believe it or not! The screen width of iPhone 6 is not necessarily 375px, while that of iPhone 6 Plus is not necessarily 414px,

You may not believe this question. The reason for this problem is that the Chrome simulator and iPhone 6 real machine preview effects are inconsistent in several projects.

Why is the simulated mobile phone page in Chrome Emulation different from the real machine preview?

 

I used to think that there are two reasons:

1. Some models or browsers do not support some CSS attributes.

2. Some devices do not support fonts below 12 PX.

The 3rd reason to be added today is that the iPhone will also be related to the display mode and hardware set by the mobile phone system.

 

Next we will discuss the screen width of the iPhone 6/iPhone 6 Plus device. The screen width here refers to the device physical display size (device-width). We know that Apple has introduced the Retina screen since iPhone 4, one CSS pixel can represent multiple physical pixels (of course, when the page is scaled to another ratio, the CSS 1px can also represent multiple device pixels, it only results in different definitions ). First, we must make it clear that CSS pixels in front-end development is irrelevant to the resolution pixels mentioned in the device resolution. Because the default viewport of most of our mobile devices is 980px, it is larger than the device-width in most cases. To facilitate reading, we usually need to reset the viewport on the mobile end so that width = device-width. In this way, the screen can be fully filled by PAGE width of 100%, and no scroll bars appear horizontal, so that the reading and browsing experience is better. In addition, the method of obtaining viewport through JavaScript is document.doc umentElement. clientWidth, and the method of obtaining device-width is window. innerWidth. Today we are talking about the device screen width device-width problem.

 

The screen width of the iPhone 6 device is 375px, and the screen width of the iPhone 6 plus device is 414px. This is what our front-end developers have always believed in ". But today I want to question this conclusion.

 

Last year, when the iPhone 6/iPhone 6 + was just launched, the screen width of iPhone 6 and iPhone 6 Plus was tested using js. The result was that the screen width of iPhone 6 was 375 pixels, the screen width of iPhone 6 Plus is 414 pixels (standard mode by default ). Later, I firmly believed in this conclusion. Today, the project simulated the effects of iPhone 6 Plus in Chrome. After debugging, I didn't even know @ media only screen and (min-device-width: 414px) and (-webkit-min-device-pixel-ratio: 3) about this media query in a real machine test, this is not the first time we have encountered this situation. I feel it is necessary to answer the question and find out the "perpetrators", so I began to continuously test and find out the cause.

 

First, find out the CSS code, check the reset style, and perform CSS validate.

Since the CSS Media Query Code does not take effect, we have begun to suspect that we have personally confirmed the conclusion that we have always believed that the screen width of the iPhone 6 device is 375px, the screen width of the iPhone 6 Plus device is 414px.

 

I doubt it, but I do not believe it will overturn the original conclusion. Besides, I often wander on foreign technical websites and Stack Overflow. I have never encountered any exceptions! Just don't worry, for the sake of security, so with the check of the situation in mind continue to use JS Code to detect the width of the device.

 

JavaScript code requires only two sentences:

Alert (window. innerWidth );

Alert (window. devicePixelRatio );

The second sentence is the pixel ratio of the device.

 

I borrowed the iPhone 6 and iPhone 6 Plus from my colleagues and almost stunned me when I saw the test results. Some devices are 320 in width, some are 375 in width, and some are 414 in width...

 

Later, we found that the system settings provided the "display mode" setting starting with iPhone 6.

 

"Display mode" is divided into "standard" and "zoom in" Options: If you want to make the iPhone 6/6 Plus desktop application icon display effect smaller, you can set it to "standard" mode. If you want to display a large image, you can set it to "zoom in.

 

The procedure is as follows:

 

1. Click Settings)

 

 

2. Find the "display and brightness" item for the slide.

 

3. Click "display mode ".

4. Select one of "standard" and "zoom in" and click "set" in the upper right corner ".

5. Click the "use xx mode" option at the bottom to confirm and restart the phone.

 

You can use JS to obtain the following data by switching between the two display modes:

 

IPhone 6 Plus first device (white ):

IPhone 6 Plus in standard mode: screen width 414px, pixel ratio is 3. (iOS 8.1.3 (12B466 ))

IPhone 6 Plus in Zoom-in mode: the screen width is 375px, And the pixel ratio is 3. (iOS 8.1.3 (12B466 ))

The screen width in standard mode is 414, and the screen width in Zoom mode is 375.

 

IPhone 6 Plus second device (silver ):

IPhone 6 Plus in standard mode: screen width 414px, pixel ratio is 3. (iOS 8.2 (12D508 ))

IPhone 6 Plus in Zoom-in mode: the screen width is 375px, And the pixel ratio is 3. (iOS 8.2 (12D508 ))

The screen width in standard mode is 414, and the screen width in Zoom mode is 375.

 

IPhone 6 Plus third device (white ):

IPhone 6 Plus in standard mode: screen width 414px, pixel ratio is 3. (8.1.1 (12B436 ))

IPhone 6 Plus in Zoom-in mode: the screen width is 375px, And the pixel ratio is 3. (8.1.1 (12B436 ))

The screen width in standard mode is 414, and the screen width in Zoom mode is 375.

 

 

IPhone 6 first device (white)

IPhone 6 in standard mode: screen width 320px, pixel ratio is 2. (iOS 8.2 (12D508 ))

IPhone 6 in Zoom-in mode: the screen width is 320px, And the pixel ratio is 2. (iOS 8.2 (12D508 ))

The screen width of the standard mode and zoom-in mode is 320.

 

IPhone 6 second device (white)

IPhone 6 in standard mode: the screen width is 375px, And the pixel ratio is 2. (iOS 8.1.3 (12B466 ))

IPhone 6 in Zoom-in mode: the screen width is 320px, And the pixel ratio is 2. (iOS 8.1.3 (12B466 ))

The screen width in standard mode is 375, and the screen width in Zoom mode is 320.

 

IPhone 6, third device (silver)

 

IPhone 6 in standard mode: the screen width is 375px, And the pixel ratio is 2. (iOS 8.2 (12D508 ))

IPhone 6 in Zoom-in mode: the screen width is 320px, And the pixel ratio is 2. (iOS 8.2 (12D508 ))

The screen width in standard mode is 375, and the screen width in Zoom mode is 320.

 

IPhone 6 fourth device (white)

 

IPhone 6 in standard mode: the screen width is 375px, And the pixel ratio is 2. (iOS 8.1 (12B411 ))

IPhone 6 in Zoom-in mode: the screen width is 320px, And the pixel ratio is 2. (iOS 8.1 (12B411 ))

The screen width in standard mode is 375, and the screen width in Zoom mode is 320.

 

 

 

Through observation, we can find that,The screen width of iPhone 6 Plus in Zoom-in mode is equal to the screen width of iPhone 6 in standard mode. The screen width of most iPhone 6 in Zoom-in mode is equal to that of iPhone 5/5s.This means that the content displayed in the iPhone 6 Plus zoom-in mode is the same as that in the standard mode of iPhone 6. The content displayed in the iPhone 6 zoom-in mode is similar to that displayed in iPhone 5S.However, some iPhone6 display modes are 320px in width.No matter which display mode you select during initial settings, you can change and switch the mode.

 

What is the cause? I don't know here. I guess it is probably related to the screen material of the factory hardware. Maybe some special cases of iPhone 6 only exist in mainland China ~~ Despise Apple's practices for treating Chinese users differently !!!

 

This raises a problem. When we adapt to the iPhone, there are several more situations. IPhone series device media query:

@ Media only screen and (min-device-width: 320px) {// for iPhone 3} @ media only screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {// for iPhone 4, 5c, 5S, all iPhone6 zoom-in modes, standard mode for some iPhone6} @ media only screen and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 2) {// standard mode for most iPhone6} @ media only screen and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3) {// zoom in mode for all iPhone6 +} @ media only screen and (min-device-width: 412px) and (-webkit-min-device-pixel-ratio: 3) {// For all iPhone 6 + standard modes, 414px is written as 412px because Samsung Nexus 6 is 412px and can be processed in one operation}

The conclusion is that during mobile Web compatibility testing, the simulated Chrome effect cannot be fully equal to that of the iPhone 6/Plus host. Make sure that you confirm the display mode and the actual screen width of the iPhone device before debugging.

 

Let's just take a look at the case where the width of the device is 320px in both standard and zoom-in modes. However, it is not reliable to test the CSS media query code and view the preview effect of a real machine without confirming that the iPhone 6/iPhone 6 Plus is in the standard or magnified mode. Therefore,When the display mode of the device is not confirmed, this conclusion is completely true: the screen width of the iPhone 6 is not necessarily 375px, and the screen width of the iPhone 6 Plus is not necessarily 414px.

Reprinted Please note: original article from CSDN freshlover space http://blog.csdn.net/freshlover/article/details/44454991