根据苹果的网站:
iPhone 6 的分辨率为 1334 x 750 像素,分辨率为 326 ppi,对比度为 1400:1(典型值)
iPhone 6+ 的分辨率为 1920 x 1080 像素,分辨率为 401 ppi,对比度为 1300:1(典型值)
但是,每个 CSS 媒体查询响应断点是什么?(肖像和风景)
我不完全了解如何使用各种响应式模拟器测试视网膜屏幕尺寸。任何帮助将非常感激。
根据苹果的网站:
iPhone 6 的分辨率为 1334 x 750 像素,分辨率为 326 ppi,对比度为 1400:1(典型值)
iPhone 6+ 的分辨率为 1920 x 1080 像素,分辨率为 401 ppi,对比度为 1300:1(典型值)
但是,每个 CSS 媒体查询响应断点是什么?(肖像和风景)
我不完全了解如何使用各种响应式模拟器测试视网膜屏幕尺寸。任何帮助将非常感激。
您引用的是设备的物理像素,而不是 cssdevice-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 2.6 DPR
6 Plus 的尺寸实际上3.0 DPR
缩小1.15
了2.6 DPR
. 更多信息可以在http://www.paintcodeapp.com/news/iphone-6-screens-demystified找到澄清(感谢@mdcarter 的链接!)
@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 */
}
您可以在此处获取所有标准设备的媒体查询列表