web前端H5页面适配 iPhoneX的具体方法是什么？_Web前端

【适配】web前端H5页面适配 iPhoneX的具体方法是什么？

2020-04-01 16:09发布

1条回答

2楼 · 2020-08-28 10:52

第一步：设置网页在可视窗口的布局方式

1	`<meta` `name='viewport'` `content="width=device-width, viewport-fit=cover"` `/>`

第二步：页面主体内容限定在安全区域内

1

2

3

4

5

6

body {

  /* 适配齐刘海*/

  padding-top: constant(safe-area-inset-top);  

 /* 适配底部黑条*/

  padding-bottom: constant(safe-area-inset-bottom);

}

第三步：fixed 元素的适配

bottom 不是0的情况

1

2

3

4

/* bottom 不是0的情况 */

.fixed {

  bottom: calc(50px(原来的bottom值) + constant(safe-area-inset-bottom));

}

吸底的情况（bottom=0）

/* 方法1 ：设置内边距 扩展高度*/

/* 这个方案需要吸底条必须是有背景色的，因为扩展的部分背景是跟随外容器的，否则出现镂空情况。*/

.fix {

  padding-bottom: constant(safe-area-inset-bottom);

}

/* 直接扩展高度*/

.fix {

  height: calc(60px(原来的高度值) + constant(safe-area-inset-bottom));

}

/* 方法2 ：在元素下面用一个空div填充， 但是背景色要一致 */

.blank {

  position: fixed;

  bottom: 0;

  height: 0;

  width: 100%;

  height: constant(safe-area-inset-bottom);

  background-color: #fff;

}

/* 吸底元素样式 */

.fix {

  margin-bottom: constant(safe-area-inset-bottom);

}

最后：使用@supports

因为只有有齐刘海和底部黑条的机型才需要适配样式，可以用@support配合使用：

1

2

3

4

5

@supports (bottom: constant(safe-area-inset-bottom)) {

  body {

    padding-bottom: constant(safe-area-inset-bottom);

}

}

【适配】web前端H5页面适配 iPhoneX的具体方法是什么？