简述:

如下示意图所示:从iPhone10(iPhoneX)开始浏览网页时,网页底部的工具栏默认以一个黑色横线的形式存在,当点击这一区域(黄色色块所示区域)时可弹出页脚工具栏。而默认状态下,这个黑色的线会挡住页面内容。

同样,手机顶部的“刘海”,或者手机四周圆角都可能会阻挡页面内容。为了解决这一问题。有了env()这样的环境变量。它最初由iOS浏览器提供,用于允许开发人员将其内容放置在视口的安全区域中,该规范中定义的safe-area-inset-* 值可用于确保内容即使在非矩形的视区中也可以完全显示。

实例:

我们通常会制作页脚导航,或者功能按键。比如留言,电话按钮等。那么如何保证不会被页脚的“横线”挡住呢?下面两张图前者是没有经过特殊处理的,后者是使用了env()变量。

使用env变量设置后:


可以看到,使用了env后,可以在ios上,将内容显示在安全区域。不会被“横线”阻挡。

上例关键代码如下:

首先要在head中声明:viewport-fit=cover

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

下一步在指定元素上作用。其中:safe-area-inset-bottom代表的既是当前设备底部的安全(区域)距离,这是一个环境变量,非固定值,与设备有关。

padding                : 10px;
height                 : 62px;
padding-bottom         : calc(constant(safe-area-inset-bottom) + 10px);
padding-bottom         : calc(env(safe-area-inset-bottom) + 10px);
height                 : calc(constant(safe-area-inset-bottom) + 62px);
height                 : calc(env(safe-area-inset-bottom) + 62px);
补充:
/*默认padding*/
padding-bottom: 0;
/*iOS < 11.2*/
padding-bottom: constant(safe-area-inset-bottom);
/*iOS 11.2 >*/
padding-bottom: env(safe-area-inset-bottom);
其他:

如需更多了解,请访问:
https://developer.mozilla.org/en-US/docs/Web/CSS/env