iPhone 6和6 Plus响应断点

Question

根据Apple的网站:

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

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

但是,CSS媒体查询响应断点的内容是什么？(肖像和风景)

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

Answer 1

您引用的是设备的物理像素,而不是css 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)

希望这可以帮助!

编辑:

关于2.6 DPRiPhone 6 Plus,它实际上已经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 */
}

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