Believe it or not, you! IPhone6 screen width is not necessarily the 375px,iphone6 plus screen width is not necessarily 414px

You may not be able to believe this question, the reason for this problem is that the Chrome emulator and the IPhone6 real-computer preview are inconsistent in several projects.

Why does the chrome emulation analog phone page and the real-computer preview look inconsistent?

There are two reasons why I used to think:

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

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

The 3rd reason to add today is that the iphone will also have to do with the display mode and device hardware that the phone system sets.

The following is a discussion of the Iphone6/iphone6 plus device screen width, which refers to the device display size (device-width), we know that Apple has introduced the retina screen from IPhone4, A CSS pixel can represent multiple physical pixels (of course, when the page is scaled to other scales, CSS 1px can be used to represent multiple device pixels, but the difference in sharpness is caused). First of all, we have to make it clear that the CSS pixels in our front-end development has nothing to do with the resolution pixels the device resolution. Since most of our mobile devices default to viewport are 980px, in most cases larger than device-width. So in order to read convenience, we generally have to move end multiplicity viewport, let width=device-width. again this can be done by the width of the page 100% full screen, the level does not appear scroll bar, make the reading browsing experience better. Add a way to get viewport through javascript:document.documentElement.clientWidth, Gets the Device-width way window.innerwidth. Today is to say is the device screen width device-width problem.

The IPhone6 device screen width is 414px 375px,iphone 6Plus device screen width, which is the "truth" that our front-end developers have always believed in. But today I have to question the verdict.

Last year Iphone6/iphone 6+ just listed, with JS detected IPhone6 and IPhone 6 Plus screen width, the results are iPhone6 screen width 375 pixels, iPhone6 plus screen width 414 pixels (default standard mode). I have been convinced of this conclusion, until today, the project in Chrome under the simulation IPhone6 plus effect, debugging completed, with the real machine test did not know @media only screen and (MIN-DEVICE-WIDTH:414PX) and (- WEBKIT-MIN-DEVICE-PIXEL-RATIO:3) This media query, this is not the first time to encounter this situation, feel the need to find out, the "perpetrators" to find out, so began to constantly test, look for reasons.

First look for CSS code problems, check the reset style, also carried out CSS validate, no harvest.

Since the CSS media query code does not take effect, vaguely began to suspect that they have personally confirmed the conclusion, that is what we always think: iPhone6 device screen width is 375px,iphone 6 Plus device screen width 414px.

Doubts are suspected, but they do not believe they will overturn the original conclusions. Moreover, often in foreign technical website and stack overflow wandering, never encountered an exception Ah! Just do not worry, for the picture of peace of mind, so with the verification of the heart continue to use JS code to detect the width of the device.

The JavaScript code only needs two sentences:

alert (window.innerwidth);

alert (window.devicepixelratio);

A detection screen width, the second sentence detection device pixel ratio.

I borrowed a lot of colleagues ' iPhone6 and IPhone6 Plus and saw the test results almost stunned me. Some equipment width is 320, some 375, some 414, disorderly ...

It was later discovered that the system setup provided the "Display mode" setting starting from IPhone6.

The "display mode" is divided into "standard" and "magnified" options: If you want the iphone 6/6 Plus Desktop app icon to appear smaller, you can set it to "standard" mode. If you want large icons to appear, you can set the zoom mode.

The setup action steps are:

1. Click on the desktop settings (Settings)

2. Slide to find the "display and brightness" item.

3. Click "Display Mode".

4. Select one of the "standard" and "Zoom in" and click "Settings" in the top right corner.

5. Finally click on the bottom of the " use xx mode " option to confirm, the phone restarts.

By switching between the two display modes, JS gets the following data:

IPhone6 Plus first device (white):

IPhone6 Plus in standard mode: screen width 414px, pixel ratio is 3. (IOS 8.1.3 (12b466))

IPhone6 Plus in magnification mode: screen width 375px, pixel ratio is 3. (IOS 8.1.3 (12b466))

Standard mode screen width 414, magnification mode screen width 375.

IPhone6 plus a second device (silver):

IPhone6 Plus in standard mode: screen width 414px, pixel ratio is 3. (IOS 8.2 (12d508))

IPhone6 Plus in magnification mode: screen width 375px, pixel ratio is 3. (IOS 8.2 (12d508))

Standard mode screen width 414, magnification mode screen width 375.

IPhone6 plus a third device (white):

IPhone6 Plus in standard mode: screen width 414px, pixel ratio is 3. (8.1.1 (12b436))

IPhone6 Plus in magnification mode: screen width 375px, pixel ratio is 3. (8.1.1 (12b436))

Standard mode screen width 414, magnification mode screen width 375.

IPhone6 first Device (white)

IPhone6 in Standard mode: screen width 320px, pixel ratio is 2. (IOS 8.2 (12d508))

IPhone6 in magnification mode: screen width 320px, pixel ratio is 2. (IOS 8.2 (12d508))

Both the standard mode and the zoom mode screen width are 320.

IPhone6 second device (white)

IPhone6 in Standard mode: screen width 375px, pixel ratio is 2. (IOS 8.1.3 (12b466))

IPhone6 in magnification mode: screen width 320px, pixel ratio is 2. (IOS 8.1.3 (12b466))

Standard mode screen width 375, magnification mode screen width 320.

IPhone6 third device (silver)

IPhone6 in Standard mode: screen width 375px, pixel ratio is 2. (IOS 8.2 (12d508))

IPhone6 in magnification mode: screen width 320px, pixel ratio is 2. (IOS 8.2 (12d508))

Standard mode screen width 375, magnification mode screen width 320.

IPhone6 Fourth device (white)

IPhone6 in Standard mode: screen width 375px, pixel ratio is 2. (IOS 8.1 (12b411))

IPhone6 in magnification mode: screen width 320px, pixel ratio is 2. (IOS 8.1 (12b411))

Standard mode screen width 375, magnification mode screen width 320.

Through observation we can find thatiPhone6 Plus in the magnification mode of the screen width is equal to IPhone6 standard mode screen width, most of the iPhone6 in the magnification mode of the screen width equal to the iphone5/5s of the screen width , which means that iPhone6 Plus in magnification mode is the same as the standard mode of IPhone6, the content of IPhone6 magnification mode and the iphone5s display are close. There are exceptions, however, that some IPhone6 display mode screen widths are 320px. regardless of which display mode you chose during the initial setup, you can then change and switch.

What causes, here is unknown, presumably with the factory hardware of the screen material relationship. Perhaps this special situation of some iPhone6 only exist in mainland China ~ ~ Despise the next Apple to distinguish between mainland users!!!

This begs the question, and we have several more things to do when it comes to adapting the iphone device. iphone series Device Media query:

@media only screen and (min-device-width:320px) {         //For iphone 3} @media only screens and (min-device-width:320px) and (- Webkit-min-device-pixel-ratio:2) {         //For iphone 4, 5c,5s, all iPhone6 magnification modes, individual IPhone6 Standard mode} @media only screen and ( min-device-width:375px) and (-webkit-min-device-pixel-ratio:2) {//For most iPhone6 Standard mode} @media only screen and ( min-device-width:375px) and (-webkit-min-device-pixel-ratio:3) {//For all iphone6+ magnification modes} @media only screen and ( min-device-width:412px) and (-webkit-min-device-pixel-ratio:3) {//For all iphone6+ standard mode, 414px write 412px is due to Samsung Nexus 6 412px , can be processed together}

The conclusion is that when doing a mobile Web compatibility test, you can't equate the chrome simulation with the Iphone6/plus real machine. Be sure to check the iphone device display mode and the actual screen width after the targeted debugging.

In other words, it is a case to assume that the width of the device is 320px in both standard and magnification modes. However, in the absence of confirmation Iphone6/iphone 6 Plus is in the standard mode or magnification mode, to test the CSS Media query code, to see the real-computer preview effect, is not a reliable approach. Therefore, in the case of not confirming the device display mode, this conclusion is fully established: IPhone6 screen width is not necessarily 375px,iphone6 plus screen width is not necessarily 414px.

Reprint Please specify: Original article from csdn freshlover space http://blog.csdn.net/freshlover/article/details/44454991

Believe it or not, you! IPhone6 screen width is not necessarily the 375px,iphone6 plus screen width is not necessarily 414px