适配iphone X

首先需要为meta标签加上viewport-fit=cover,默认viewport-fit=contain,跟background-size类似。
当值设置为cover既可让安全区域铺满全屏,就跟适配其他设备没什么区别了。
但是内容会被顶部和底部的硬件遮挡,如果不想被遮挡,就需要头部底部预留一定高度。
所以就需为body加上padding,官方提供了四个值,可以直接获取到头部底部以及横屏时候的左侧右侧值,我们只需要在自己的容器设置上着四个值即可:
constant-top: (safe-area-inset-top)
padding-left: constant(safe-area-inset-left)
padding-right: constant(safe-area-inset-right)
padding-bottom: constant(safe-area-inset-bottom)

  • 需要注意的是,viewport-fit值不为cover设置constant()是无效的
  • 竖屏时候左侧右侧值为0,横屏时候左侧右侧才有值

code

meta

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

css

.container {
  overflow: scroll;
  box-sizing: border-box;
  padding-top: constant(safe-area-inset-top);
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-bottom: constant(safe-area-inset-bottom);
}
    原文作者:charles
    原文地址: https://segmentfault.com/a/1190000012575580
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞