css适配iPhoneX屏幕安全区

场景

iPhoneX对比起以前其他的手机,屏幕顶部变成了留海屏,底部取消了物理按键改成了小黑条,这种改动导致了web开发中页面上新的适配问题。

比如一些需要贴在底部的按钮,和呼起的tabBar和底部弹出框,在iphoneX上就会出现被小黑条遮挡内容,或者页面上出现白色空隙的问题。

image.png

image.png

先上解决代码

<head>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" name="viewport"/>
</head>
body {height: 100vh;}
/* 你的贴底元素↓ */
.container {
  position: absolute;
  bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
  ...
}

几个新知识

安全区域

安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)影响,如下图蓝色区域:


Apple的官方文档:adaptivity-and-layout

viewport-fit

iOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:

  • contain: 可视窗口完全包含网页内容(左图)
  • cover:网页内容完全覆盖可视窗口(右图)
  • auto:默认值,跟 contain 表现一致

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

参考文档:viewport-fit-descriptor

env

iOS11 新增特性,Webkit 的一个 CSS 函数,用于向 CSS 插入用户代理定义的变量设定安全区域与边界的距离,有四个预定义的变量:

  • safe-area-inset-left:安全区域距离左边边界距离
  • safe-area-inset-right:安全区域距离右边边界距离
  • safe-area-inset-top:安全区域距离顶部边界距离
  • safe-area-inset-bottom:安全区域距离底部边界距离
env()必须配合 viewport-fit=cover 使用!

我们最常用的就是 safe-area-inset-bottom, 这个代表着不被小黑条遮挡的安全距离。

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

image.png

参考文档:designing-websites-for-iphone-xMDN/env()

reference

https://aotu.io/notes/2017/11...

阅读 4.1k

推荐阅读