也许你没见过 constant这个东西，我以前也没见过，它也是专为iphoneX而设计的值，注意只有当你的 <meta> 标签加上了 viewport-fit=cover 之后，该值才能生效。当然，在android手机上，是不会被识别的。
3. 只为 IphoneX 生效
注意了，我们做的这个适配是只为 IphoneX 生效的，并不能影响到其他手机，所以我们要做响应式布局，即，使用媒体查询，如下：
| // 注意这里采用的是690px(safe area高度)，不是812px; @media only screen and (width: 375px) and (height: 690px){ body { height: 100vh; } } |
有资料说上面这么用是ok的，然而我用着却没啥效果，于是我放宽了点条件，做了修改如下：
| @media only screen and (width: 375px) and (min-height: 690px){ body { height: 100vh; } } |
区别在于我是识别宽度为375px，高度大于690px 的设备即为 IphoneX。当然，目前只有X 这款设备符合该条件。
4. 网页高度变化
先强调一下，这部分不太确定，我自己遇到了，提出来说明一下：
设置了 viewport-fit 之后，会发现原本设置的100% 的高度不符合预期了，只占用了部分屏幕空间，其实，不急，只需要作如下修改：
| @media only screen and (width: 375px) and (min-height: 690px) { body { height: 100vh; } } |
vh 是检查 viewport 即视口的高度，1vh = 1% 视口高度，是个绝对单位。设置100vh的意思就是占满全屏高度
5. 导航栏吸顶，任务栏吸底
页面内容可以拉动，如果导航栏也随着滑动，效果很丑，这就需要我们实现导航栏吸顶效果。实现大家都会就不多说，这里展示我的一个案例：
| @media only screen and (width: 375px) and (min-height: 690px){ div { position: fixed; display: block; z-index: 300; } .bg { height: calc(3.5rem + 44px); } p { margin-top: 44px; } } |
任务栏同理。
后语
本文只是简单的描述一下如何处理IphoneX的适配问题的具体步骤，如果还想更深入的了解原理，欢迎大家到评论区交流。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易采站长站。
