CSS iPhone 6 和 6 Plus 媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25759046/
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 Media Queries
提问by MattT
Does anyone know specific screen sizes to target media queries for iPhone 6 and 6 Plus?
有谁知道针对 iPhone 6 和 6 Plus 的媒体查询的特定屏幕尺寸？
Also, the icon sizes and splash screens?
另外，图标大小和闪屏？
回答by davidcondrey
iPhone 6
iPhone 6
Landscape
@media only screen and (min-device-width : 375px) // or 213.4375em or 3in or 9cm and (max-device-width : 667px) // or 41.6875em and (width : 667px) // or 41.6875em and (height : 375px) // or 23.4375em and (orientation : landscape) and (color : 8) and (device-aspect-ratio : 375/667) and (aspect-ratio : 667/375) and (device-pixel-ratio : 2) and (-webkit-min-device-pixel-ratio : 2) { }Portrait
@media only screen and (min-device-width : 375px) // or 213.4375em and (max-device-width : 667px) // or 41.6875em and (width : 375px) // or 23.4375em and (height : 559px) // or 34.9375em and (orientation : portrait) and (color : 8) and (device-aspect-ratio : 375/667) and (aspect-ratio : 375/559) and (device-pixel-ratio : 2) and (-webkit-min-device-pixel-ratio : 2) { }if you prefer you can use
(device-width : 375px)and(device-height: 559px)in place of themin-andmax-settings.It is not necessary to use all of these settings, and these are not all the possible settings. These are just the majority of possible options so you can pick and choose whichever ones meet your needs.
User Agent
tested with my iPhone 6 (model MG6G2LL/A) with iOS 9.0 (13A4305g)
# Safari Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.39 (KHTML, like Gecko) Version/9.0 Mobile/13A4305g Safari 601.1 # Google Chrome Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10 (000102) # Mercury Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B554a Safari/9537.53Launch images
- 750 x 1334 (@2x) for portrait
- 1334 x 750 (@2x) for landscape
App icon
- 120 x 120
风景
@media only screen and (min-device-width : 375px) // or 213.4375em or 3in or 9cm and (max-device-width : 667px) // or 41.6875em and (width : 667px) // or 41.6875em and (height : 375px) // or 23.4375em and (orientation : landscape) and (color : 8) and (device-aspect-ratio : 375/667) and (aspect-ratio : 667/375) and (device-pixel-ratio : 2) and (-webkit-min-device-pixel-ratio : 2) { }肖像
@media only screen and (min-device-width : 375px) // or 213.4375em and (max-device-width : 667px) // or 41.6875em and (width : 375px) // or 23.4375em and (height : 559px) // or 34.9375em and (orientation : portrait) and (color : 8) and (device-aspect-ratio : 375/667) and (aspect-ratio : 375/559) and (device-pixel-ratio : 2) and (-webkit-min-device-pixel-ratio : 2) { }如果您愿意，可以使用
(device-width : 375px)和(device-height: 559px)代替min-和max-设置。没有必要使用所有这些设置，并且这些不是所有可能的设置。这些只是大多数可能的选项，因此您可以选择满足您需求的选项。
用户代理
用我的 iPhone 6（型号 MG6G2LL/A）和 iOS 9.0 (13A4305g) 测试
# Safari Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.39 (KHTML, like Gecko) Version/9.0 Mobile/13A4305g Safari 601.1 # Google Chrome Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10 (000102) # Mercury Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B554a Safari/9537.53启动映像
- 纵向 750 x 1334 (@2x)
- 1334 x 750 (@2x) 横向
应用程序图标
- 120 × 120
iPhone 6+
iPhone 6+
Landscape
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 3) { }Portrait
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (device-width : 414px) and (device-height : 736px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 3) and (-webkit-device-pixel-ratio : 3) { }Launch images
- 1242 x 2208 (@3x) for portrait
- 2208 x 1242 (@3x) for landscape
App icon
- 180 x 180
风景
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 3) { }肖像
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (device-width : 414px) and (device-height : 736px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 3) and (-webkit-device-pixel-ratio : 3) { }启动映像
- 纵向 1242 x 2208 (@3x)
- 2208 x 1242 (@3x) 横向
应用程序图标
- 180 × 180
iPhone 6 and 6+
iPhone 6 和 6+
@media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{ }
Predicted
预料到的
According to the Apple websitethe iPhone 6 Plus will have 401 pixels-per-inch and be 1920 x 1080. The smaller version of the iPhone 6 will be 1334 x 750 with 326 PPI.
根据Apple 网站，iPhone 6 Plus 的像素为每英寸 401 像素，分辨率为 1920 x 1080。iPhone 6 的较小版本为 1334 x 750，PPI 为 326。
So, assuming that information is correct, we can write a media query for the iPhone 6:
因此，假设信息是正确的，我们可以为 iPhone 6 编写一个媒体查询：
@media screen
and (min-device-width : 1080px)
and (max-device-width : 1920px)
and (min-resolution: 401dpi)
and (device-aspect-ratio:16/9)
{ }
@media screen
and (min-device-width : 750px)
and (max-device-width : 1334px)
and (min-resolution: 326dpi)
{ }
Note that device-aspect-ratiowill be deprecated in http://dev.w3.org/csswg/mediaqueries-4/and replaced with aspect-ratio
请注意，设备纵横比将在http://dev.w3.org/csswg/mediaqueries-4/ 中被弃用并替换为纵横比
Min-width and max-width may be something like 1704 x 960.
最小宽度和最大宽度可能类似于 1704 x 960。
Apple Watch (speculative)
Apple Watch（推测）
Specs on the Watch are still a bit speculative since (as far as I'm aware) there has been no official spec sheet yet. But Apple did mention in this press releasethat the Watch will be available in two sizes.. 38mm and 42mm.
Watch 上的规格仍然有点推测性，因为（据我所知）还没有官方规格表。但苹果在本新闻稿中确实提到，这款手表将提供两种尺寸：38 毫米和 42 毫米。
Further assuming.. that those sizes refer to the screen size rather than the overall size of the Watch face these media queries should work.. And I'm sure you could give or take a few millimeters to cover either scenario without sacrificing any unwanted targeting because..
进一步假设......这些尺寸是指屏幕尺寸而不是表盘的整体尺寸，这些媒体查询应该可以工作......而且我相信你可以给予或采取几毫米来覆盖任何一种情况，而不会牺牲任何不需要的目标因为..
@media (!small) and (damn-small), (omfg) { }
or
或者
@media
(max-device-width:42mm)
and (min-device-width:38mm)
{ }
It's worth noting that Media Queries Level 4from W3C currently only available as a first public draft, once available for use will bring with it a lot of new features designed with smaller wearable devices like this in mind.
值得注意的是，W3C 的Media Queries Level 4目前仅作为第一个公开草案提供，一旦可用，它将带来许多新功能，这些新功能专为此类较小的可穿戴设备而设计。
回答by Fiona - myaccessible.website
This is what is working for me right now:
这就是现在对我有用的东西：
iPhone 6
iPhone 6
@media only screen and (max-device-width: 667px)
and (-webkit-device-pixel-ratio: 2) {
iPhone 6+
iPhone 6+
@media screen and (min-device-width : 414px)
and (-webkit-device-pixel-ratio: 3)
回答by activeping
This works for me for the iphone 6
这适用于我的 iphone 6
/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
}
/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
}
/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
}
/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {
}
/*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){
}
/*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 : portrait){
}
/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){
}
回答by DevelumPHP
Just so you know the iPhone 6 lies about it's min-width. It thinks it is 320 instead of 375 it is suppose to be.
只是为了让您知道 iPhone 6 谎报它的最小宽度。它认为它是 320 而不是它假设的 375。
@media only screen and (max-device-width: 667px)
and (-webkit-device-pixel-ratio: 2) {
}
This was the only thing I could get to work to target the iPhone 6. The 6+ works fine the using this method:
这是我唯一可以针对 iPhone 6 进行工作的方法。 6+ 使用此方法可以正常工作：
@media screen and (min-device-width : 414px)
and (max-device-height : 736px) and (max-resolution: 401dpi)
{
}
回答by RamThakur
You have to target screen size using media query for different screen size.
您必须针对不同的屏幕尺寸使用媒体查询来定位屏幕尺寸。
for iphone:
对于iPhone：
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2)
{ }
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{ }
and for desktopversion:
和桌面版：
@media only screen (max-width: 1080){
}
回答by simhumileco
iPhone X
iPhone X
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
/* uncomment for only portrait: */
/* and (orientation: portrait) */
/* uncomment for only landscape: */
/* and (orientation: landscape) */ {
}
iPhone 6+, 7+ and 8+
iPhone 6+、7+ 和 8+
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
/* uncomment for only portrait: */
/* and (orientation: portrait) */
/* uncomment for only landscape: */
/* and (orientation: landscape) */ {
}
iPhone 6, 6S, 7 and 8
iPhone 6、6S、7 和 8
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
/* uncomment for only portrait: */
/* and (orientation: portrait) */
/* uncomment for only landscape: */
/* and (orientation: landscape) */ {
}
Source: Media Queries for Standard Devices
来源：标准设备的媒体查询
回答by jegadeesh
For iPhone 5,
对于 iPhone 5，
@media screen and (device-aspect-ratio: 40/71)
for iPhone 6,7,8
适用于 iPhone 6、7、8
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait)
for iPhone 6+,7+,8+
适用于 iPhone 6+、7+、8+
@media screen and (-webkit-device-pixel-ratio: 3) and (min-device-width: 414px)
Working fine for me as of now.
到目前为止对我来说工作正常。
