Posted by viewport-fit 这个属性解决全屏的问题，设置了这个属性后，页面就会填充整个刘海区域。
- <meta name=“viewport” content=“width=device-width, initial-scale=1.0, viewport-fit=cover”>
上面属性设置之后，再把html,boby高度设置成100% 发现底部出现空白没有填满，这主要是这里的100%，只是安全区域的高度，是不包含非安全区域的。需要主动获取屏幕像素高度为html、body设置。
其他 viewport-fit 可设置的值:
- contain: 可视窗口完全包含网页内容（安全区域）
- cover：网页内容完全覆盖可视窗口（全屏）
- auto：默认值，跟 contain 表现一致
constant 函数
Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：
- safe-area-inset-left：安全区域距离左边边界距离
- safe-area-inset-right：安全区域距离右边边界距离
- safe-area-inset-top：安全区域距离顶部边界距离
- safe-area-inset-bottom：安全区域距离底部边界距离
注：当 viewport-fit=contain 时 constant 函数是不起作用的，必须要配合 viewport-fit=cover 使用。
可设置底部安全距离进行避让，例:
- @supports (bottombottom: constant(safe-area-inset–bottombottom)) {
- div {
- margin-bottom: constant(safe-area-inset–bottombottom);
- }
- }
本文链接地址: iOS 全面屏 web 适配