Open hanyuxinting opened 5 years ago
安全区域 安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)影响,如下图蓝色区域:
要保证页面可视、可操作区域是在安全区域。
iPhoneX 对现有 viewport meta 标签扩展的三种方式: contain: 可视窗口完全包含网页内容(左图) cover:网页内容完全覆盖可视窗口(右图) auto:默认值,跟 contain 表现一致
iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:
safe-area-inset-left:安全区域距离左边边界距离 safe-area-inset-right:安全区域距离右边边界距离 safe-area-inset-top:安全区域距离顶部边界距离 safe-area-inset-bottom:安全区域距离底部边界距离
当 viewport-fit=contain 时 env() 是不起作用的,必须要配合 viewport-fit=cover 使用。对于不支持env() 的浏览器,浏览器将会忽略它。
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
基本可以搞定,也可使用其他变异方法。
more things about it
安全区域 安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)影响,如下图蓝色区域:
要保证页面可视、可操作区域是在安全区域。
iPhoneX 对现有 viewport meta 标签扩展的三种方式: contain: 可视窗口完全包含网页内容(左图) cover:网页内容完全覆盖可视窗口(右图) auto:默认值,跟 contain 表现一致
iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:
safe-area-inset-left:安全区域距离左边边界距离 safe-area-inset-right:安全区域距离右边边界距离 safe-area-inset-top:安全区域距离顶部边界距离 safe-area-inset-bottom:安全区域距离底部边界距离
基本可以搞定,也可使用其他变异方法。
more things about it