h5苹果x适配,iPhonex适配
IphoneX适配的关键在于页面如何适配“齐刘海”、底部操作区、大圆角的问题。
IphoneX与其他手机相比的不同之处在于，虽然设备是同一块屏幕，但实际上是分成了几个模块。详情见下图：
我们正常的一个网页，移到X上，效果是内容只显示在安全区域，非安全区域没有网页内容，也就是说在头部和底部会出现白块。怎么处理？
解决办法
1. 给body加一个 background-color
为什么要添加背景色？有什么用？注意我们刚刚提到头和底部会出现白色块，实际上说是白色并不准确，因为这个颜色实际上来自于身体的背景色。另外，当我们向上或向下拉动内容时，会显示网页底部的内容和颜色，这其实就是正文的背景色。所以如果你想修改这两个效果，可以设置车身的背景色。
2. 添加 viewport-fit = cover 的 meta 标签
这一步至关重要。先看看结果：
复制代码如下：
meta name= viewport content= initial-scale=1.0，minimum-scale=1.0，maximum-scale=1.0，user-scalable=0，width=device-width，viewport-fit=cover /
为什么很关键？iphoneX的主要问题是除了在安全区域无法显示网页内容，而它就是为解决这个问题而量身定制的。以上内容设置好后，顶部和底部可以打开到网页显示内容。
然而，使用后，你会发现该区域是开放的，但内容(通常是导航栏)被“齐刘海”部分屏蔽。而且发现原来设定的100%的高度并没有占据全部的高度空间。我该怎么办？
对于头部的高度和底部的高度，其实是有匹配值的，如下图所示：
因此，我们有以下解决方案：
1.修改我们的导航栏的高度，将safe-area-inset-top的高度添加到原来的高度，即44px；具体可以这样写：
height:calc(nav height 44px)；并重置副本在导航栏上的位置。
2.iOS 11的浏览器chromium内核提供了以下内容，也就是上图中标注的那些值：
如何使用safe-area-inset-top safe-area-inset-right safe-area-inset-left safe-area-inset-bottom？很简单：
body { padding-top:constant(safe-area-inset-top)；//是导航栏状态栏的高度88px padding-left:constant(safe-area-inset-left)；//0 padding-right:如果屏幕不是垂直的，则为常量(safe-area-inset-right)；//0 padding-bottom:如果屏幕不是垂直的，则为常量(safe-area-inset-bottom)；//底弧的高度是34px}可能你没见过常数这个东西，我也没见过。也是为iphoneX设计的值。请注意，该值只有在使用viewport-fit=cover添加meta标记时才能生效。当然，在安卓手机上，是不会被识别的。
3. 只为 IphoneX 生效
注意我们做的适配只对IphoneX有效，不能影响其他手机，所以要做一个响应式的布局，就是使用媒体查询，如下：
//注意这里用的是690px(安全区高度)，不是812px@media only屏幕和(宽度：375px)和(高度：690px){ body {高度：100vh}}}有信息说这样用是可以的，但是我用的时候不行，所以放宽了一些条件，做了如下修改：
@media only屏幕和(宽度：375px)和(最小高度：690px){ body {高度：100vh}}不同的是我把宽度375px，高度大于690px的设备识别为IphoneX。当然，目前只有X设备符合这个条件。
4. 网页高度变化
首先，这部分我不太清楚。我自己遇到的，所以我想解释一下：
设置viewport-fit后，你会发现原来设置的100%的高度并不符合预期，只占用了部分屏幕空间。其实不用急，只需做如下修改：
@media only屏幕和(宽度：375px)和(最小高度：690px) { body {高度：100vh}}vh是检查视口的高度，1vh=视口高度的1%，是一个绝对单位。设置100vh意味着全屏高度。
5. 导航栏吸顶，任务栏吸底
内容是可以拉动的，如果导航条跟着一起滑动，效果会很难看，这就需要我们达到导航条的顶部吸收效果。实施大家就不多说了。这是我的一个案例：
@media only屏幕和(宽度：375px)和(最小高度：690 px){ div { position:fixed；显示：块；z指数：300；} .bg {身高：calc(3.5 rem 44px)；} p { margin-top:44px；}}任务栏也一样。
后语
本文简单描述了如何处理IphoneX适配的具体步骤。如果想了解更多原理，欢迎在评论区交流。
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。