viewport-fit
viewport-fit 控制文档如何填充满足整个屏幕
1 | <meta name="viewport" content="viewport-fit=cover" /> |
// 不影响初始布局,整个web页面可以查看
viewport-fit: auto;
// 按照比例缩放,以显示内嵌的最大矩形
viewport-fit: contain;
// 视图端口被缩放以填充设备显示
viewport-fit: cover;1
2
3
4
5
6
7
8
9
10
// 建议:如果使用 viewport-fit=cover 最好使用 safe-area 变量,确保重要内容不会显示在视口之外
body {
padding:
env(safe-area-inset-top, 20px)
env(safe-area-inset-right, 20px)
env(safe-area-inset-bottom, 20px)
env(safe-area-inset-left, 20px);
}
css的env函数
env 将用户代理的环境变量插入在css 中
1 | env( <custom-ident> , <declaration-value>? ) |
custom-ident:指用户自定义字符串标识符。一种CSS 数据类型;要区分大小写,值不能有任何歧义
1 | env(safe-area-inset-bottom); |
value
safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left
safe-area-inset-*由四个定义了视口边缘内矩形的 top, right, bottom 和 left 的环境变量组成,这样可以安全地放入内容,而不会有被非矩形的显示切断的风险。对于矩形视口,例如普通的笔记本电脑显示器,其值等于零。 对于非矩形显示器(如圆形表盘,iPhoneX屏幕),在用户代理设置的四个值形成的矩形内,所有内容均可见。
注意: 不同于其他的 CSS 属性,用户代理定义的属性名字对大小写敏感。
支持: chrome 69+
解决方案:
1、meta 的 viewport content 值增加 viewport-fit=cover
2、如果是固底的 tab-bar 使用 env(safe-area-inset-bottom),其他情况按照场景设置其他的值
1 | padding-top: constant(safe-area-inset-top); // ios < 11.2 |