为了账号安全,请及时绑定邮箱和手机立即绑定

iPhone 6和6 Plus媒体查询

/ 猿问

iPhone 6和6 Plus媒体查询

HUX布斯 2019-10-05 13:02:57

有谁知道特定的屏幕尺寸以针对iPhone 6和6 Plus的媒体查询?

另外,图标大小和初始屏幕?


查看完整描述

3 回答

?
慕姐4208626

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)

{ }

肖像


@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-设置。


不必使用所有这些设置,并且这些也不是所有可能的设置。这些只是大多数可能的选择,因此您可以选择满足您需求的任何一种。


用户代理


在装有iOS 9.0(13A4305g)的iPhone 6(型号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

启动图像


纵向750 x 1334(@ 2x)

横向1334 x 750(@ 2x)

应用程式图示


120 x 120

iPhone 6+

景观


@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 x 180

iPhone 6和6+

@media only screen 

    and (max-device-width: 640px), 

    only screen and (max-device-width: 667px), 

    only screen and (max-width: 480px)

{ }

预料到的

根据Apple网站的数据,iPhone 6 Plus的每英寸像素为401像素,分辨率为1920 x1080。iPhone6的较小版本为1334 x 750,PPI为326。


因此,假设信息正确,我们可以为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) 

{ }

请注意,在http://dev.w3.org/csswg/mediaqueries-4/中将弃用device-aspect-ratio,并将其替换为Aspect-ratio


最小宽度和最大宽度可能约为1704 x 960。


Apple Watch(投机性)

Watch上的规格仍然有些投机,因为(据我所知)还没有正式的规格表。但是苹果确实在本新闻稿中提到手表将有两种尺寸可供选择:38mm和42mm。


进一步假设..这些尺寸是指屏幕尺寸,而不是Watch正面的整体尺寸,这些媒体查询应该可以使用。而且我敢肯定,您可以在不牺牲任何目标定位的情况下,花几毫米来覆盖这两种情况因为..


@media (!small) and (damn-small), (omfg) { }

要么


@media 

    (max-device-width:42mm) 

    and (min-device-width:38mm) 

{ }

值得注意的是,W3C的Media Queries Level 4当前仅作为第一稿公开发布,一旦投入使用,将带来许多新功能,这些功能是针对此类较小的可穿戴设备而设计的。


查看完整回答
反对 回复 2019-10-05
?
catspeake

这就是现在为我工作的东西:


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)


查看完整回答
反对 回复 2019-10-05
?
慕雪6442864

这对我适用于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){ 


}


查看完整回答
反对 回复 2019-10-05

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信