适配 iPhoneX 安全区域, IOS 系统特有变量

IOS11 为了适配 iPhoneX 对现有 viewport meta 标签新增了一个扩展viewport-fit，用于设置网页在可视窗口的布局方式，可设置三个值：auto(默认，表现和contain一致) ， contain， cover;

说明:
IOS 11中的WebKit包含了一个新的CSS函数constant()，以及一组四个预定义的常量;
IOS11.2之后CSS函数改成了env()，为了做兼容，这两者要同时写在css文件里面。这四个预定义的常量用来设定安全区域与边界的距离。

注意: 这四个值只有在viewport-fit=cover时才生效，默认值auto、或者viewport-fit=contain时是不生效的。

uniapp 在 unpackagedistbuildapp-plus__uniappview.html 中, 默认帮我们添加了兼容代码

<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>

一般底部安全区通常为68rpx

预定义的常量:
屏幕上安全距离: safe-area-inset-top
屏幕右安全距离: safe-area-inset-right
屏幕下安全距离: safe-area-inset-bottom
屏幕左安全距离: safe-area-inset-left

iOS 11

padding-top: constant(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-left);

iOS 11.2+

padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);

兼容性写法：

注意: 两者顺序不能换，先constant，再env。

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
box-sizing: content-box; /* 使padding可以撑起高度*/

作为CSS全局变量去使用, uniapp 使用 page 作为根元素, html是使用:root作为根元素

page {
--safe-area-inset-top: 0px;
--safe-area-inset-right: 0px;
--safe-area-inset-bottom: 0px;
--safe-area-inset-left: 0px;
}
@supports (top: constant(safe-area-inset-top)) {
page {
--safe-area-inset-top: constant(safe-area-inset-top);
--safe-area-inset-right: constant(safe-area-inset-right);
--safe-area-inset-bottom: constant(safe-area-inset-bottom);
--safe-area-inset-left: constant(safe-area-inset-left);
}
}
@supports (top: env(safe-area-inset-top)) {
page {
--safe-area-inset-top: env(safe-area-inset-top);
--safe-area-inset-right: env(safe-area-inset-right);
--safe-area-inset-bottom: env(safe-area-inset-bottom);
--safe-area-inset-left: env(safe-area-inset-left);
}
}

用法

.container{
padding-bottom: var(--safe-area-inset-bottom);
height: calc(100vh - var(--safe-area-inset-bottom) - var(--safe-area-inset-top));
}

参考:
https://www.freesion.com/article/5417476475/
https://blog.csdn.net/weixin_44714325/article/details/113110076

最后

以上就是含糊奇迹为你收集整理的适配 iPhoneX 安全区域, IOS 系统特有变量的全部内容，希望文章能够帮你解决适配 iPhoneX 安全区域, IOS 系统特有变量所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。