ionic3 嵌套微信,适配iphone x

本来看着微信头部导航栏那 大黑边, 拿着设配app的方式 适配了半天也没成功, 回过神才发现 那是微信提供的头部导航栏啊, 不需要去适配的.

转而发现,底部的tabar 被iPhone X 的那条线覆盖了. 然后了简单的做了下适配tab 的css样式.现在分享出来:

没适配前:

WechatIMG29.jpeg

适配后:

WechatIMG28.jpeg

这里只是简单的处理了下css.

开始还百度着如何获取这是Iphone x 的设备呢?
然后把学的css3的一些特性全忘了. 还是同事提醒了下iphone x那个性的屏幕我才想到.

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

.tabs-ios .tabbar{
padding-bottom: 20px;
}

}

对没错,我只是在css中 给tabbar 加了个padding值, 只在iphone x上生效.