iPhone 6和6 Plus响应式断点

Question

根据苹果公司的网站：

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

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

但是，每个CSS媒体查询响应断点是什么？(纵向和横向)

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

Answer 1

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

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

知道了这一点(假设tweet是正确的)，并假设您使用了正确的meta viewport标记，您将大致看到：

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

希望这能有所帮助！

编辑：

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

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

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