iPhone 6 和 6 Plus 响应式断点 [重复]

Question

根据苹果的网站：

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

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

但是，每个 CSS 媒体查询响应断点是什么？ （人像和风景）

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

Answer 1

@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 */
}

您可以获得所有标准设备的媒体查询列表here

Answer 2

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

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