问题描述
有没有人知道特定的屏幕尺寸以便针对iPhone 6和6 Plus的媒体查询?
此外,图标大小和闪屏如何?
iPhone 6
-
Landscape
@media only screen
and(min-device-width:375px)// or 213.4375em or 3in or 9cm
和(max-device-width:667px)//或41.6875em
和(width:667px)//或41.6875em
和(height:375px)//或23.4375em
和(orientation:landscape)
和(color:8)
和(device-aspect-ratio:375/667)
和(aspect-ratio:667/375)
和(device-pixel-ratio:2)
和(-webkit-min-device-pixel-ratio:2)
{}
-
肖像
@media only screen
和(min-device-width:375px)//或213.4375em
和(max-device-width:667px)//或41.6875em
和(width:375px)//或23.4375em
and(height:559px)//或34.9375em
and(orientation:portrait)
and(color:8)
and(device-aspect-ratio:375/667 )
和(aspect-ratio:375/559)
和(device-pixel-ratio:2)
和(-webkit-min-device-pixel-ratio:2)
{}
如果您愿意,可以使用 -width:375px)和(device-height:559px) c>和 max - 设置。
这些设置,并且这些不是所有可能的设置。
-
用户代理
$ b
测试我的iPhone 6(型号MG6G2LL / A)和iOS 9.0(13A4305g) > #Safari
Mozilla / 5.0(iPhone; CPU iPhone OS 9_0像Mac OS X)AppleWebKit / 601.1.39(KHTML,像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,如Gecko)版本/ 5.1.3 Safari / 534.53.10(000102)
#Mercury
Mozilla / 5.0(iPhone; CPU iPhone OS 7_0_4,如Mac OS X)AppleWebKit / 537.51.1(KHTML,像Gecko)版本/ 7.0 Mobile / 11B554a Safari / 9537.53
-
启动图片
- 750 x 1334 2x)
- 1334 x 750(@ 2x)for landscape
-
应用图标
- 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)
{}
@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)for landscape
-
应用程式图示
- 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)
{}
b $ b
预测
根据的iPhone 6 Plus将有401像素每英寸和1920 x 1080.更小的版本的iPhone 6将是1334 x 750与326 PPI。 / p>
因此,假设信息正确,我们可以为iPhone 6写一个媒体查询:
@media screen
and(min-device-width:1080px)
and(max-device-width:1920px)
and (min-resolution:401dpi)
和(device-aspect-ratio:16/9)
{}
@media屏幕
和width:750px)
and(max-device-width:1334px)
and(min-resolution:326dpi)
{}
请注意, 4 /> http://dev.w3.org/csswg/mediaqueries-4/ ,并替换为
最小宽度和最大宽度可能类似于1704 x 960。
Apple Watch(投机)
在手表仍然有点推测,因为(据我所知)目前还没有官方规格表。但是苹果在,手表将有两种尺寸.. 38mm和42mm。
进一步假设..这些尺寸是指屏幕尺寸,而不是手表的整体大小这些媒体查询应该工作..我相信你可以给或几毫米,以涵盖任何情况,而不会牺牲任何不必要的目标,因为..
@media(!small)和(damn-small),(omfg){}
或
@media
(max-device-width:42mm)
和(min-device-width:38mm)
{}
值得注意的是,来自W3C的目前只能作为首次公开草稿,一旦可供使用,带来了很多新的功能,设计了这样的较小的可穿戴设备。
Does anyone know specific screen sizes to target media queries for iPhone 6 and 6 Plus?
Also, the icon sizes and splash screens?
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 the min- and max- 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.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) { }
Predicted
According to the Apple website the 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.
So, assuming that information is correct, we can write a media query for the 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-ratio will be deprecated in http://dev.w3.org/csswg/mediaqueries-4/ and replaced with aspect-ratio
Min-width and max-width may be something like 1704 x 960.
Apple Watch (speculative)
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 release 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) { }
or
@media (max-device-width:42mm) and (min-device-width:38mm) { }
It's worth noting that Media Queries Level 4 from 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.
这篇关于iPhone 6和6 Plus媒体查询的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!