iPhone 6 和 6 Plus 响应断点 [英] iPhone 6 and 6 Plus Responsive Breakpoints

问题描述

根据 Apple 的网站:

According to Apple's site:

iPhone 6 的分辨率为 1334 x 750 像素，分辨率为 326 ppi，对比度为 1400:1(典型)

The iPhone 6 has 1334-by-750-pixel resolution at 326 ppi with 1400:1 contrast ratio (typical)

iPhone 6+ 的分辨率为 1920 x 1080 像素，分辨率为 401 ppi，对比度为 1300:1(典型)

The iPhone 6+ has 1920-by-1080-pixel resolution at 401 ppi with 1300:1 contrast ratio (typical)

但是，每个 CSS 媒体查询响应断点是什么?(人像和风景)

However, what would the CSS media query responsive breakpoints be for each? (portrait and landscape)

我不完全了解如何使用各种响应式模拟器来测试视网膜屏幕尺寸.任何帮助将非常感激.

I don't fully understand how to test the retina screen sizes using the various responsive emulators out there. Any help would be much appreciated.

推荐答案

您引用的是设备的物理像素，而不是 css device-width 大小.根据这个 tweet，两者的设备宽度将是:

You're referencing the physical pixels of the device, rather than the css device-width sizes. According to this tweet, the device-widths for the two will be:

iPhone 6: 375px (2.0 DPR)
iPhone 6 Plus: 414px (2.6 DPR)

知道这一点(并假设推文是正确的)，并假设您使用了正确的 meta viewport 标签，您大致可以看到:

Knowing that (and assuming the tweet is correct), and assuming your using the proper meta viewport tag, you're looking at roughly:

iPhone 6: 375px (portrait), 667px (landscape)
iPhone 6 Plus: 414 (portrait), 736px (landscape)

希望这有帮助！

关于iPhone 6 Plus的2.6 DPR，实际上是3.0 DPR缩小了1.15，结果是2.6 DPR.更多信息可以在 http://www.paintcodeapp.com/news/iphone 上找到-6-screens-demystified 澄清(感谢@mdcarter 提供链接！)

Regarding the 2.6 DPR of the iPhone 6 Plus, it's actually 3.0 DPR downsized by 1.15, which results in 2.6 DPR. More info can be found at http://www.paintcodeapp.com/news/iphone-6-screens-demystified for clarification (thanks @mdcarter for the link!)

这篇关于iPhone 6 和 6 Plus 响应断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！