IPhone6和6 Plus 媒体查询

有人知道针对 iPhone6和6 Plus 的媒体查询的特定屏幕尺寸吗？

还有，图标大小和启动画面？

205159 次浏览
小开
最佳答案

IPhone 6

  • 景观

    @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)
{ }

    如果您愿意，您可以使用 (device-width : 375px)和 (device-height: 559px)来代替 min-和 max-设置。

    没有必要使用所有这些设置，而且这些不是所有可能的设置。这些只是大多数可能的选择，所以你可以选择和选择哪一个满足你的需要。

  • 用户代理

    我用 iOS9.0(13A4305g)测试了我的 iPhone6(型号 MG6G2LL/A)

    # 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

  • Launch images

    • 750 x 1334 (@2x) for portrait
    • 1334 x 750 (@2x) for landscape

  • App icon

    • 120 x 120

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

iPhone 6 and 6+

@media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{ }

早就预料到了

根据 苹果公司的网站的数据，iPhone6 Plus 的像素为每英寸401像素，1920 x 1080。较小版本的 iPhone6将是1334x750，PPI 为326。

因此，假设信息是正确的，我们可以为 iPhone6编写一个媒体查询:

@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)
{ }

请注意，在 http://dev.w3.org/csswg/mediaqueries-4/中将被弃用，而代之以

最小宽度和最大宽度可能类似于1704 x 960。

苹果手表(推测)

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 这份新闻稿 that the Watch will be available in two sizes.. 38mm and 42mm.

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) { }

或者

@media
(max-device-width:42mm)
and (min-device-width:38mm)
{ }

值得注意的是，W3C 的 媒体查询第4级目前只作为第一个公开草案提供，一旦提供使用，将带来许多新的功能设计的更小的可穿戴设备像这样的想法。

小开

只是想让你知道 iPhone6的最小宽度是骗人的。它认为应该是375而不是320。

@media only screen and (max-device-width: 667px)
and (-webkit-device-pixel-ratio: 2) {


}

这是我能做的唯一一件针对 iPhone6的事情。使用这种方法，6 + 可以很好地工作:

@media screen and (min-device-width : 414px)
and (max-device-height : 736px) and (max-resolution: 401dpi)
{


}
小开

这就是目前对我有效的方法:

IPhone 6

@media only screen and (max-device-width: 667px)
and (-webkit-device-pixel-ratio: 2) {

IPhone 6 + 

@media screen and (min-device-width : 414px)
and (-webkit-device-pixel-ratio: 3)
小开

这对我的 iphone6很有用

/*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){


}
小开

您必须使用媒体查询为不同的屏幕大小设定目标屏幕大小。

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)
{ }

以及 桌面版本:

@media only screen (max-width: 1080){


}
小开

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 + 和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和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) */ {


}

资料来源: 标准设备的媒体查询

小开

对于 iPhone5来说,

@media screen and (device-aspect-ratio: 40/71)

IPhone 6,7,8

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait)

适用于 iPhone6 + ，7 + ，8 + 

@media screen and (-webkit-device-pixel-ratio: 3) and (min-device-width: 414px)

目前为止对我来说还不错。


提交答案