移动端适配兼容--ios系统iphoneX等机型底部小横条处理，app嵌入的适配处理

// 1.首先要在meta标签中加上viewport-fit=cover<meta name="viewport" content="width=device-width, viewport-fit=cover, xxxx">// 2.整个内容区域html,body {padding-bottom: constant(safe-area-inset-bottom);padding-bo

梧桐落叶~

3845人浏览 · 2020-07-04 19:53:27

梧桐落叶~ · 2020-07-04 19:53:27 发布

// 1.首先要在meta标签中加上viewport-fit=cover
<meta name="viewport" content="width=device-width, viewport-fit=cover, xxxx">

// 2.整个内容区域
html,body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
// 3.如有底部元素采用固定定位
.fixed{//固定元素类名
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff; // 另外background-color要有背景色的，不然会出现透明镂空的情况
}

以上情况iphoneX，iphone11机型都适配成功。但是有一种情况没有成功。。就是app嵌入的情况（项目主要是要链接到客户的app中的）。当时项目适配采用的是vw适配，插件链接奉上postcss-px-to-viewport，当时项目底部定位的高度都是固定的值。导致底部布局错乱。当时的解决方案就是把底部固定的高度（最外层的盒子）取消了，整个高度是用padding来撑开的。至此问题解决。。。