微信小程序适配iphoneX

在小程序开发中,涉及到适配iphonex的情况主要就是在页面的最下出现button的情况,对于这个的解决思路就是:

1.获取设备型号:

cont app = getApp();

wx.getSystemInfo({
 success: function(res) {
//model中包含着设备信息
  console.log(res.model)
        var model = res.model
        if (model.search('iPhone X') != -1){
           app.globalData.isIpx = true;
        }else{
          app.globalData.isIpx = false;
        }
}
})
  1. 根据不同的设备,设置不同的css样式,另外在html布局的时候button放进别的容器标签中例如:
xx.wxml
    <view class='contentView' style='padding-bottom:{{btuBottom}}'>
        <button class='but'>Button </button>
    </view>
xx.wxss
.contentView{
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
}
.btu{
  width: 100%;
  background-color: #3d97f2;
  color: #fff;
  font-size: 30rpx;
}
xx.js
  data: {
  btuBottom""
  },
//在这里只需要判断是不是iphonex,然后设置下padding-bottom:即可
  onLoad: function (options) {
    let isPhone = app.globalData.isIpx;
    if(isPhone){
      this.setData({
        btuBottom:"68rpx",
      })
    }
}

这样就完成了适配。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,854评论 1 92
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,027评论 3 119
  • 深林里飘下了雪 挂念着清冷的昨天 雾霭遮住了浮躁不安 我游荡在宽阔的草原上 流浪着不安分的心 我的心里想着远方 草...
    深北羽翼阅读 295评论 0 4
  • 笔记: 在日常生活与社会交往中,人与人之间大部分的关系,都是处在动态博弈的过程中的,算计得失,考虑优劣。 Stor...
    qf平凡的凡阅读 986评论 4 7
  • 这孤岛起了雾笔直大道幻化成无数曲折小径横在面前 年兽和老虎不辞辛劳地捕猎我 不知自由飞翔时可否看到应许的彼岸花
    NoneLand阅读 118评论 0 0