摘要：第三步元素的适配类型一完全吸底元素类型二非完全吸底元素，比如返回顶部侧边广告等第四步如果我们只希望才需要新增适配样式，我们可以配合来隔离兼容样式
第一步：设置网页在可视窗口的布局方式
ios11新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口：
第二步：页面主体内容限定在安全区域内
env() 和 constant()ios11新增特性
● safe-area-inset-left：安全区域距离左边边界距离
● safe-area-inset-right：安全区域距离右边边界距离
● safe-area-inset-top：安全区域距离顶部边界距离
● safe-area-inset-bottom：安全区域距离底部边界距离
这里我们只需要关注 safe-area-inset-bottom 这个变量，因为它对应的就是小黑条的高度（横竖屏时值不一样）。
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
第三步：fixed 元素的适配
● 类型一：fixed 完全吸底元素（bottom = 0）
{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
● 类型二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回顶部”、“侧边广告” 等
{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
第四步：如果我们只希望 iPhoneX 才需要新增适配样式，我们可以配合 @supports 来隔离兼容样式
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
div {
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/107517.html
摘要：由于做了全面屏并且还保留一块小刘海，因此很多以前的移动端页面需要结合客户端做出相应的适配，具体如下顶部通栏之前的客户端一直采用状态栏导航栏的做法。这时候需要底部留出一块空白安全区域，页面内容最终的底线应在手机拐角处。该安全区域的高度为。 由于iphoneX做了全面屏并且还保留一块小刘海，因此很多以前的移动端H5页面需要结合App客户端做出相应的适配，具体如下： 1、顶部通栏 之前的客户...
摘要：由于做了全面屏并且还保留一块小刘海，因此很多以前的移动端页面需要结合客户端做出相应的适配，具体如下顶部通栏之前的客户端一直采用状态栏导航栏的做法。这时候需要底部留出一块空白安全区域，页面内容最终的底线应在手机拐角处。该安全区域的高度为。 由于iphoneX做了全面屏并且还保留一块小刘海，因此很多以前的移动端H5页面需要结合App客户端做出相应的适配，具体如下： 1、顶部通栏 之前的客户...
摘要：由于做了全面屏并且还保留一块小刘海，因此很多以前的移动端页面需要结合客户端做出相应的适配，具体如下顶部通栏之前的客户端一直采用状态栏导航栏的做法。这时候需要底部留出一块空白安全区域，页面内容最终的底线应在手机拐角处。该安全区域的高度为。 由于iphoneX做了全面屏并且还保留一块小刘海，因此很多以前的移动端H5页面需要结合App客户端做出相应的适配，具体如下： 1、顶部通栏 之前的客户...
阅读 3058·2019-08-30 15:56
阅读 1158·2019-08-29 15:20
阅读 1504·2019-08-29 13:19
阅读 1428·2019-08-29 13:10
阅读 3345·2019-08-26 18:27
阅读 3029·2019-08-26 11:46
阅读 2198·2019-08-26 11:45
阅读 3605·2019-08-26 10:12
