iPhone 6和6 Plus响应式断点

Question

根据苹果网站:

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

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

然而，无论是竖屏还是横屏，CSS响应式断点是多少呢？

我不太懂如何使用各种响应式模拟器测试视网膜屏幕大小。任何帮助都将不胜感激。

- user3349250

---

通常情况下，如果你正在设计一个响应式布局，你不需要为特定设备尺寸进行设计。我只是想指出这一点。 - hal

我明白了。实际上，我正在设计一个应用程序，所以我想测试新iPhone的确切尺寸。 - user3349250

一个好的解释 http://www.paintcodeapp.com/news/iphone-6-screens-demystified - Sten

Answer 1

您正在引用设备的物理像素，而不是 CSS device-width 的尺寸。根据这个推文，两者的 device-width 将是：

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

如果你知道这些（并且假设推文是正确的），并且假设你使用了正确的 meta viewport 标签，那么大约会看到：

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提供链接！）

- Jack

---

谢谢你的信息，杰克。我想给你的答案点赞，但是我没有足够的声望。 - user3349250

实际上，iPhone 6 Plus 将具有 3 密度像素比率，但图像在缩小以适合显示器之后。更多信息请参见：http://www.paintcodeapp.com/news/iphone-6-screens-demystified - mdcarter

@mdcarter 非常有趣！我会相应地更新我的答案。谢谢！ - Jack

@mdcarter - 在我更新CSS以包含3x之前，这些设备是否仍会呈现2x或恢复为1x？ - remarsh

Answer 2

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
    /* iPhone 6 Portrait */ 
}


@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 
    /* iPhone 6 landscape */
}


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { 
    /* iPhone 6+ Portrait */
}


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 
    /* iPhone 6+ landscape */
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
    /* iPhone 6 and iPhone 6+ portrait and landscape */
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){ 
    /* iPhone 6 and iPhone 6+ portrait */
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){ 
    /* iPhone 6 and iPhone 6+ landscape */
}

您可以在此处获取所有标准设备的媒体查询列表。

- qnimate