Open LiuL0703 opened 5 years ago
对于iPhone X等全面屏的适配问题，IOS11提出了一个安全区域的概念，安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，要做好适配，必须保证页面可视、可操作区域是在安全区域内 对于适配ios全面屏，ios对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：
【注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤】
iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量
【当 viewport-fit=contain 时 env() 是不起作用的，必须要配合 viewport-fit=cover 使用。对于不支持env() 的浏览器，浏览器将会忽略它】 同时为了向后兼容ios11.2~ios11.0 需要使用关键字 constant 而不是env
css-attribute: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ css-attribute: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
注意：env() 跟 constant() 需要同时存在，而且顺序不能换
更多内容可以参考文档：webkit.org
适配ios全面屏
对于iPhone X等全面屏的适配问题，IOS11提出了一个安全区域的概念，安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，要做好适配，必须保证页面可视、可操作区域是在安全区域内 对于适配ios全面屏，ios对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：
【注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤】
iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量
【当 viewport-fit=contain 时 env() 是不起作用的，必须要配合 viewport-fit=cover 使用。对于不支持env() 的浏览器，浏览器将会忽略它】 同时为了向后兼容ios11.2~ios11.0 需要使用关键字 constant 而不是env
注意：env() 跟 constant() 需要同时存在，而且顺序不能换
更多内容可以参考文档：webkit.org