最近我碰到了大麻烦事，H5页面在iPhoneX上看起来不太对劲。iPhoneX的屏幕大小、分辨率还有形状都跟以前的iPhone不一样，所以我们的H5页面在上面看起来很糟糕。为了解决这个问题，我仔细研究了iPhoneX的适配方法，还结合实际情况，总结出来一些需要注意的地方。今天，我就把这些心得告诉你们，希望能帮到你们。
1.iPhoneX屏幕特性的变化
首先，你得知道iPhoneX这个新家伙的屏幕跟以前的不一样在哪儿。它用上了最新的OLED屏，分辨率高达2436×1125像素，比iPhone8那个1334×750像素高多了去。还有就是，它的屏幕比例换了个口味，从16:9换成了18.5:9，这样看起来屏幕就拉长了，视野也宽阔了些。不过，因为屏幕上下两边的特殊设计，给做H5页面的人带来了点小麻烦。
你看这个iPhoneX，前边就是那个大家都知道的“齐刘海”，那是因为它要装摄像头和其他传感器。后面，有个叫HomeIndicator的虚拟按键，用来代替实体Home键嘞。这俩玩意儿都会占点屏地方，万一你做的H5页面没搞好适配，可能就会被遮住，那多不好！
2.安全区域的概念
为了不让iPhoneX那奇葩的设计挡住我们的关键信息，苹果给我们提供了个SafeArea的概念。这个区域就是手机屏幕上那些不会被手机边缘、传感器壳和HomeIndicator遮住的地方。所以咱们做H5页面的时候，最好把重要的东西放在这片安全区里，这样才能让大家看得清楚明白！
那么，要搞清安全区域在哪儿？首先得知道iPhoneX的屏幕密度（PPI）跟大小有啥关系。屏幕密度就是指每平方英寸能显示多少像素点，跟屏幕大小和分辨率都有关。算一下就能得出iPhoneX的安全区域到底是多大，这样才能更方便地做适配。
3.viewport-fit元标签的作用
看这里！苹果在iOS11里新添加了一个叫viewport-fit的元标签，很好用！主要是为了让你怎么方便怎么来，控制iPhoneX上展示出来的H5页面效果。viewport-fit的值也就是三选一：auto、contain或者cover。如果你没特别设置，那默认使用的就是auto，这样一来系统就能帮你搞定，保证页面元素不超出屏幕范围哟。
只是，若要把网页画面看得更细致，你得调整一下那个叫做viewport-fit的参数，设成contain或者cover就行了。contain就是让网页内容尽量填满屏幕，但可能会留下一些空隙；而cover，就是让网页内容盖住整个屏幕，不过可能会被手机的圆角给挡住一部分。所以，只要选好这个参数，就能让网页看起来更舒服！
4.使用CSS函数constant()进行适配
除了viewport-fit这个新玩意儿，还有一个叫做constant()的CSS小助手，它能帮咱们轻松搞定网页布局。只要在使用中使用constant()函数，就能够根据屏幕大小来调整，灵活度超高！
比如说，我们能用constant(safe-area-inset-top)拿到顶部安全区的高，再用constant(safe-area-inset-bottom)拿到底部安全区的高，然后把这俩数值用到网页布局里去。这样的话，就算iPhoneX的屏幕大小变了，咱们的网页还是照样好看。
body {
padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px
padding-left: constant(safe-area-inset-left); //如果未竖屏时为0
padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px
}
5.实战案例分析
我做了个H5页面放到iPhoneX上试试效果，试过以后发现，只要把viewport-fit设好，用constant()函数调好，咱们的H5页面就能百分百适配iPhoneX！不管是字啊图啊还是视频，统统都能看得清清楚楚，不会有被手机圆角挡住的问题~
@media only screen and (width: 375px) and (height: 690px){
body {
background: blue;
}
}
此外，我又发现了个小技巧！当我们用渐变做背景时，把viewport-fit调成”cover”，这样渐变色就能铺满整个屏幕，看起来更舒服~还有就是，如果你要用定好位的元素，那就把viewport-fit设成”contain”，这样子的话，元素绝对不会被HomeIndicator遮住，放心大胆地用！
6.适配过程中遇到的问题及解决方案
调整页面别的地方后，用const()函数就没出过乱子！因为之前有些地方没调好，导致布局有点儿乱。所以，我把页面其他地方都弄好了，这样就能适应iPhoneX的屏幕~
最让我头疼的是，有些网页即使没设viewport-fit元标签，内容也能刷屏，糟糕的体验！为了解决这问题，我就加了个viewport-fit元标签，然后把它设成了contain，这下子，内容就不会跑出屏幕外。
this is subElement
7.总结与展望
这次搞定iPhoneX的适配之后，真心觉得H5页面在它上面太考验技术！不过得了窍门儿的话，那些问题也就见招拆招，让大家看起来更爽不是么。
* {
padding: 0;
margin: 0;
}
body {
background:green;
padding-top: constant(safe-area-inset-top); //88px
/*padding-left: constant(safe-area-inset-left);*/
/*padding-right: constant(safe-area-inset-right);*/
/*padding-bottom: constant(safe-area-inset-bottom);*/
}
看以后，新机器多了，屏幕适配也就显得更重要。希望我这点经验能给你们有点启示，让你们以后处理屏幕适配问题时更顺手些。
* {
padding: 0;
margin: 0;
}
body {
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22));
padding-top: constant(safe-area-inset-top); //88px
/*padding-left: constant(safe-area-inset-left);*/
/*padding-right: constant(safe-area-inset-right);*/
/*padding-bottom: constant(safe-area-inset-bottom);*/
}
好！问你们个事儿：在你们做项目时，是怎么搞定iPhoneX这些新设备的屏幕适配咧？快来我们的评论区留言，别忘了点个赞和转发让其他人也看到~这样才能让更多人都明白屏幕适配有多重要！
评论0