iponeX适配问题安全区域viewport-fit顶部安全距离底部安全距离处理左右安全距离

86 阅读 0 评论 57 点赞

我是靠谱客的博主重要彩虹，最近开发中收集的这篇文章主要介绍iponeX适配问题安全区域viewport-fit顶部安全距离底部安全距离处理左右安全距离，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

安全区域

安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域：
在这里插入图片描述

viewport-fit

contain: 可视窗口完全包含网页内容（左图）
cover：网页内容完全覆盖可视窗口（右图）
auto：默认值，跟 contain 表现一致

网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置
viewport-fit=cover，这是适配的关键步骤。

顶部安全距离

iOS11 iPhoneX constant(safe-area-inset-top) = 88px
iOS11 其他机型 constant(safe-area-inset-top) = 64px
iOS10 及以下版本和安卓不识别 constant(safe-area-inset-top)

// 64 为 iOS header 的高度
.ac-container {
padding-top: 0;
// 默认值
padding-top: calc(~'constant(safe-area-inset-top) - 64px');
// iOS 11- iOS11.2
padding-top: calc(~'env(safe-area-inset-top) - 64px');
// >= iOS11.2
}

不识别 constant(safe-area-inset-top) 和 calc 的设备 padding-top 为默认值 0
iOS11 iPhoneX padding-top 计算得到 24px，即齐刘海高度
iOS11 其他机型 padding-top 计算也得到的是 0px

底部安全距离处理

通过 window.getComputedStyle 还可以间接的获取到以下信息
iOS11 iPhoneX constant(safe-area-inset-bottom) = 34px
iOS11 其他机型 constant(safe-area-inset-bottom) = 0px
iOS11 及以下版本和安卓不识别 constant(safe-area-inset-bottom)

// 如果默认值不为 0，需要加上默认值
.ac-container {
padding-bottom: 0;
// 默认值
padding-bottom: calc(~"44 *(constant(safe-area-inset-bottom) / 34)");
// iOS 11- iOS11.2
padding-bottom: calc(~"44 * (env(safe-area-inset-bottom) / 34)");
// >= iOS11.2
}
// 10px 为底部距离小黑条距离，如果想在 iPhone X 上更靠上一点，可以将 10 增大
// 如44，刚好就在小黑条上面

不识别 constant(safe-area-inset-top) 和 calc 的设备 bottom 为默认值 0
iOS11 iPhoneX padding-bottom = 10 * 34px / 34 计算得到 10px，即底部到缺口的距离，按钮就吸在缺口位置了
iOS11 其他机型 padding-bottom = 0px * 10 / 34 计算也得到的是 0px

iOS11.2 beta 修正 constant 重命名为 env

env() 方法是在 iOS11 中被支持的，一开始他被命名为 constant()。在 Safari Technology Preview 41 and the iOS 11.2 beta的版本中支持，constant() 已经被重命名为 env()。我们可以使用 css 的 fallback 机制来适配所有的版本，如果有必要的话，我们可以提前使用 env() 来适配。

左右安全距离

当使用了安全区域变量，并不能解决所有的问题。比如，上面的页面，当横屏的时候， env(safe-area-inset-left) 是有值的，当竖屏的时候，env(safe-area-inset-left)=0px，此时，文本就会挤到屏幕的边缘了。

.container {
padding: 12px;
// 左右安全距离
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}

在这里插入图片描述

为了解决这个问题，其实是需要给 padding 设置一个默认值，当 safe-area-inset-left 有值的时候，设置成 safe-area-inset-left，没值的时候使用默认值。我们可以使用一组新的 css 函数 min() and max() 来解决这个问题。这2个函数可以接受任意个数的参数，并返回最大或者最小的那个。他们也可以用到 calc() 中，也可以相互嵌套使用。

@supports(padding: max(0px)) {
.container {
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
}
}

注意⚠️：@supports 语句可以检查是否支持 max，但不要在其中使用变量，例如：@supports(padding:
max(env(safe-area-inset-left)))，因为 css对待无效的变量是返回默认值，也就是这个例子中的padding的初始值。css-variables
在上述的示例中，当竖屏时，env(safe-area-inset-left) 是 0，所以 max 函数返回了 12px。当横屏时，env(safe-area-inset-left) 的值会大于 12，所以，max函数会返回 env(safe-area-inset-left) 的值。这就保证了页面的动态适应性。

https://webkit.org/blog/7929/designing-websites-for-iphone-x/