再谈iphonex适配问题

写在前面：近日处理线上项目里iphonex的适配问题，本以为自己之前处理过相应的问题，那本次处理也会得心应手，速度杠杠的改完。结果并不是，不得不说iphonex的适配问题真心让前端处理起来就像处理ie6一样难受。但是经过多次的趟水，摸到门道，总结下来，就不会害怕下次的问题到来。

处理适配问题，按照以下几个注意点处理就行

1.name为viewport的meta标签中的设置,content中设置viewport-fit=cover

1
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover" name="viewport" />

2.给body设置安全区域，请将env设置加上，貌似现在constant对最新版本的ios系统根本不生效。

1
2
3
4
5
6
body {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

3.如果在页面顶部有position为fixed或者absolute，请设置top为0的同时，要加上下面的样式

1
2
3
4
5
.header {
    top: 0;
    top: constant(safe-area-inset-top);
    top: env(safe-area-inset-top);
}

4.如果在页面顶部有position为fixed或者absolute，但是你的top不为0，请不要用网络上所说的计算calm来写，因为要么就是不能生效，要么就是生效了，但是结果不是你想要的。用margin来处理你需要空出的安全距离，示例如下

1
2
3
4
5
.header {
    top: .2rem;
    margin-top: constant(safe-area-inset-top);
    margin-top: env(safe-area-inset-top);
}

5.其他地方的处理是一个道理