iPhone X 媒体查询适配

原文链接:https://segmentfault.com/a/1190000017188158
iPhone X尺寸
  • 5.8 英寸
  • 5.65 x 2.79 x 0.30 英寸
iPhone X分辨率
  • 1125 x 2436
  • 每英寸PX~458 像素

屏幕尺寸

Apple iPhone X的屏幕为5.8英寸,约为实际设备尺寸的82.9%。Apple iPhone X设备的物理尺寸为5.65 x 2.79 x 0.30英寸或(143.6 x 70.9 x 7.7 MM)。
单位显示顺序为“高x宽x厚”

屏幕像素密度和CSS像素比

“Pixel”是任何显示器的最小单位/元素。

适合一英寸的像素总数称为“屏幕密度”或“像素密度”,其测量为“每英寸像素数”。
像素深度限制显示每英寸像素数取决于不同的屏幕尺寸。当每英寸像素数增加超过屏幕尺寸限制时,显示分辨率将增加,但实际设备宽度/高度(以像素为单位)保持不变。实际设备像素称为设备无关像素或CSS像素比。

Apple iPhone X的密度约为458像素,实际像素密度约为153,因此它具有 3 xxhdpi的显示像素密度。

屏幕分辨率和视口

在设备上显示的像素总和称为“屏幕分辨率”。并且任何设备的实际像素总和被称为“视口”。

Apple iPhone X的物理屏幕尺寸为5.8英寸,分辨率约为1125 x 2436像素,像素密度约为458 PPI。Apple iPhone X的视口尺寸为375 x 812像素,像素比约为3。

CSS媒体查询

Apple iPhone X媒体查询(仅限移动设备)
@media only screen and (min-width: 375px) and (max-width: 767px) { /* Your Styles... */ }
Apple iPhone X Min-Width媒体查询
@media only screen and (min-width: 375px) { /* Your Styles... */ }
Apple iPhone X Min-Height媒体查询
@media only screen and (min-height: 812px) { /* Your Styles... */ }
Apple iPhone X Landscape媒体查询
@media only screen and (min-width: 812px) and (orientation: landscape) { /* Your Styles... */ }
Apple iPhone X Portrait媒体查询
@media only screen and (min-width: 375px) and (orientation: portrait) { /* Your Styles... */ }
Apple iPhone X Retina媒体查询
@media
  only screen and (-webkit-min-device-pixel-ratio: 3),
  only screen and (   min--moz-device-pixel-ratio: 3),
  only screen and (     -o-min-device-pixel-ratio: 3/1),
  only screen and (        min-device-pixel-ratio: 3),
  only screen and (                min-resolution: 458dpi),
  only screen and (                min-resolution: 3dppx) { 
    /* Retina styles here */
}

视网膜实际上是基于设备像素比率。设备大多具有2x或3x显示屏,因此您可以使用一般的视网膜媒体查询在所有类型的设备上显示高分辨率内容。Retina 2x和Retina 3x媒体查询如下:

Retina 2x媒体查询
@media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) { 
    /* Retina styles here */
}
Retina 3x媒体查询
@media
  only screen and (-webkit-min-device-pixel-ratio: 3),
  only screen and (   min--moz-device-pixel-ratio: 3),
  only screen and (     -o-min-device-pixel-ratio: 3/1),
  only screen and (        min-device-pixel-ratio: 3),
  only screen and (                min-resolution: 384dpi),
  only screen and (                min-resolution: 3dppx) { 
    /* Retina styles here */
}
展开阅读全文

iPhone X 适配

10-26

公司app适配起来比较琐碎,很多第三方库编译的时候没有支持模拟器的版本,所以我只好把这些库删掉,然后调试界面后再加进去,是不是听起来就很[img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/monkey/2.gif][/img]。(我这个女程序媛水平不高没办法)。rnrn适配iPhone X给我带来的最大教训就是:千万不要写死代码,之前用了很多20,49,44,诸如此类的高度,导致我不得一一改掉,而且吧,如果是多人合作的app,一开始就要说好一些常用的变量放在哪,不要每次你加一个,我加一个,不但重复后期还会有很多麻烦产生。rnrn好了,下面说下我适配的过程:rn[color=#0000FF]rn[b]首先适配之前我们要知道5.8英寸的iPhone X到底有什么变化。rn[/b]rn[/color]1.屏幕像素尺寸:1125 * 2436. rn2.开发尺寸:375 * 812 (你懂得),高度比iphone 6,7,8多了145pt。rnrn[img=https://img-bbs.csdn.net/upload/201710/26/1508985139_829982.png][/img]rnrn那么苹果规定的适配准则是:rn1.必须保证布局充满整个屏幕。你设计的产品核心内容不能被“齐刘海”,圆角和底部home指示器遮挡。核心内容要在safearea,如下图的位置。rn(大部分使用标准,系统UI的,比如导航栏,tableView和collections 的,都会自动调整适配iPhone X,但是如果你是自定义控件,那么它的高度什么的都要相应修改才行。)rn[img=https://img-bbs.csdn.net/upload/201710/26/1509001722_327298.png][/img]rnrn2.提供全屏体验。要让你的背景填充整个屏幕,包括指示器的位置。对于像tables和collections,要一直到屏幕最底部。但是要保证指示器的位置不能有有交互性的控件,以免影响用户体验。rnrn3.最基本的内容不能被圆角,“齐刘海”或者home键指示器剪切掉,就是不能被他们遮挡住内容。rnrn4。注意status bar的高度变化。iPhone X中status bar高度比其他所有设备都高。如果之前你代码中是写死20的高度,界面完全用这个高度来布局,那么还是改成动态的status bar的高度吧。现在iPhone X上它的高度可是44pt。rnrn5.加入你之前隐藏了status bar,那么建议在iPhone X上显示出来。现在iPhone X有更高的屏幕,status bar显示的内容对用户是有用的,他最好只在必要的时候隐藏掉。比如看视频或者照片预览。rnrn6.一些图片资源要重新设计。有的图在iPhone X上合适,其他设备可能就会被裁切掉很多,所以要保证设备显示的资源核心内容都在。不会被裁切掉。rnrn7.避免有交互的控件出现在屏幕底部也就是home指示器的位置或者出现在“齐刘海”两边的圆角处。因为底部指示器使用了滑动手势来显示主屏幕,这些手势可能会去掉这些控件的交互。圆角的位置呢对用户使用也不友好。rnrn8.不要尝试用一些黑色的控件填充隐藏掉圆角及指示器的位置。也不要在这些位置加一些奇怪的东西来装饰他们。rnrn9.允许在特定的时候隐藏掉home功能的指示器。但是用户触屏屏幕后,指示器要再次出现。比如播放视频和图片浏览时。rnrn10.tabbar默认高度其他设备是49pt,iPhone X的默认高度是83pt。rnrn[color=#0000FF][b]下面说下我们自己app里面的适配:[/b][/color]rnrn1.status bar高度被写死成20,这次要改成动态获取的。rn[code=objc][[UIApplication sharedApplication] statusBarFrame].size.heightrn[/code]rnrn2.tabbar另一个同事写的自定义的,高度也固定为49,这里也要改,iPhone X上tabbar高度默认是83,其实就是49 + 34,home指示器的高度是34pt。具体就不写了。大家看明白就行。rnrn3.也是其他一些节目的微调,其实改的东西不多,但是很麻烦,特别是有的界面各个控件的高度是根据status bar ,tabbar这些的高度变化的就麻烦了,比较琐碎。rn[color=#FF0000]rn总之,只要遵守上面的一些原则,适配也不是很难。上面的原则是根据苹果适配文档理解翻译的,大家参考。图片也是引用的苹果文档里面的。如果有说的不对的,也麻烦指出。[img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/monkey/43.gif][/img][/color]rnrnrnrn 论坛

没有更多推荐了,返回首页