iPhone 6,6加上響應斷點

根據蘋果的網站：iPhone 6,6加上響應斷點

在iPhone 6具有1334逐750像素分辨率在326 PPI與1400：1的對比度（典型值）

在iPhone 6 +在1920 ppi時具有1920 x 1080像素的分辨率和1300：1的對比度（典型值）

但是，CSS媒體查詢響應斷點會是什麼？（肖像和風景）

我不完全瞭解如何使用各種響應模擬器測試視網膜屏幕尺寸。任何幫助將非常感激。

來源

2014-09-10 user3349250

一般來說，如果你在設計一個響應式佈局你不不針對特定設備尺寸進行設計。只是想指出。 – 2014-09-10 12:27:04

我明白這一點。我實際上正在設計一個應用程序，所以我想測試新手機的確切尺寸。 – user3349250 2014-09-10 13:40:18

一個很好的解釋http://www.paintcodeapp.com/news/iphone-6-screens-demystified – Sten 2014-09-13 09:09:56

您引用設備的物理像素，而不是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)

希望這有助於！

編輯：

由1.15，導致2.6 DPR關於iPhone 6 Plus上的2.6 DPR，它實際上3.0 DPR縮小。更多信息可在http://www.paintcodeapp.com/news/iphone-6-screens-demystified找到澄清（感謝@mdcarter的鏈接！）

來源

2014-09-10 10:08:14 Jack

謝謝你的信息傑克。我會投票你的答案，我沒有聲望。 – user3349250 2014-09-10 10:28:49

實際上，iPhone 6 plus將具有3密度像素比例，但圖像是在縮小後顯示的。更多信息在這裏：http://www.paintcodeapp.com/news/iphone-6-screens-demystified – mdcarter 2014-09-16 16:10:40

@mdcarter這真的很有趣！我會相應地更新我的答案。謝謝！ – Jack 2014-09-16 16:29:18

@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

來源

2014-10-05 08:00:23 qnimate

iPhone 6,6加上響應斷點

回答

相關問題