CSS iPhone 6 和 6 Plus 响应断点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25762277/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iPhone 6 and 6 Plus Responsive Breakpoints
提问by user3349250
According to Apple's site:
根据苹果的网站：
The iPhone 6 has 1334-by-750-pixel resolution at 326 ppi with 1400:1 contrast ratio (typical)
iPhone 6 的分辨率为 1334 x 750 像素，分辨率为 326 ppi，对比度为 1400:1（典型值）
The iPhone 6+ has 1920-by-1080-pixel resolution at 401 ppi with 1300:1 contrast ratio (typical)
iPhone 6+ 的分辨率为 1920 x 1080 像素，401 ppi，对比度为 1300:1（典型）
However, what would the CSS media query responsive breakpoints be for each? (portrait and landscape)
但是，每个 CSS 媒体查询响应断点是什么？（纵向和横向）
I don't fully understand how to test the retina screen sizes using the various responsive emulators out there. Any help would be much appreciated.
我不完全了解如何使用各种响应式模拟器来测试视网膜屏幕尺寸。任何帮助将非常感激。
回答by Hyman
You're referencing the physical pixels of the device, rather than the css device-widthsizes. According to this tweet, the device-widths for the two will be:
您引用的是设备的物理像素，而不是 cssdevice-width大小。根据这条推文，两者的设备宽度将是：
iPhone 6: 375px (2.0 DPR)
iPhone 6 Plus: 414px (2.6 DPR)
Knowing that (and assuming the tweet is correct), and assuming your using the proper meta viewporttag, you're looking at roughly:
知道这一点（并假设推文是正确的），并假设您使用了正确的meta viewport标签，您大致可以看到：
iPhone 6: 375px (portrait), 667px (landscape)
iPhone 6 Plus: 414 (portrait), 736px (landscape)
Hope this helps!
希望这可以帮助！
Edit:
编辑：
Regarding the 2.6 DPRof the iPhone 6 Plus, it's actually 3.0 DPRdownsized by 1.15, which results in 2.6 DPR. More info can be found at http://www.paintcodeapp.com/news/iphone-6-screens-demystifiedfor clarification (thanks @mdcarter for the link!)
关于2.6 DPRiPhone 6 Plus，它实际上3.0 DPR缩小了1.15，这导致2.6 DPR. 更多信息可以在http://www.paintcodeapp.com/news/iphone-6-screens-demystified上找到以进行澄清（感谢@mdcarter 提供链接！）
回答by qnimate
@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 */
}
You can get list of media queries for all standard devices here
您可以在此处获取所有标准设备的媒体查询列表
