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

Posted

技术标签:

【中文标题】iPhone 6 和 6 Plus 响应式断点 [重复]【英文标题】:iPhone 6 and 6 Plus Responsive Breakpoints [duplicate] 【发布时间】:2014-11-03 22:00:21 【问题描述】:

根据苹果的网站:

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

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

但是,每个 CSS 媒体查询响应断点是什么? (人像和风景)

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

【问题讨论】:

通常,如果您设计的是响应式布局,您不会针对特定的设备尺寸进行设计。只是想指出这一点。 我明白这一点。我实际上是在设计一个应用程序,所以我想测试新 iphone 的确切尺寸。 很好的解释paintcodeapp.com/news/iphone-6-screens-demystified 【参考方案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

【讨论】:

【参考方案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 提供链接!)

【讨论】:

感谢杰克提供的信息。我会因为我没有声誉而投票赞成你的回答。 实际上 iPhone 6 plus 会有 3 的像素密度比,但图像是缩小后显示的。更多信息在这里:paintcodeapp.com/news/iphone-6-screens-demystified @mdcarter 这真的很有趣!我会相应地更新我的答案。谢谢! @mdcarter - 在我更新我的 css 以包含 3x 之前,这些设备是否仍会呈现 2x 或恢复为 1x?

以上是关于iPhone 6 和 6 Plus 响应式断点 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

仍未针对 iPhone 6 和 iPhone 6 Plus 进行优化

iPhone 6 和 6 Plus 媒体查询

iphone 6 和 6 plus 尺寸缩放

适用于 Iphone 6 和 Iphone 6 plus 的媒体 CSS

在 iPhone 6 和 6 plus 中设置背景图像和图标图像

更新为 iPhone 5 制作的 XIB 以与 iPhone 6 和 iPhone 6 Plus 一起使用