小程序适配IphoneX

首先，我们需要判断手机是否是IphoneX手机：wx.getSystemInfo

//查看手机是否是IphoneXwx.getSystemInfo({success: function (res) {console.log(res)let model = res.model.substring(0, res.model.indexOf("X")) + "X"if (model == 'iPhone X') {that.globalData.isIphoneX = true}}
})

全局定义一个变量isIphoneX，通过此值是否为true，显示或是隐藏，底部的空白区域；

  <view class="button-group {{isIphoneX ?'fix-iphonex-button':''}}"></view>

样式代码：

.fix-iphonex-button {bottom:68rpx!important;width:100vw;
}
.fix-iphonex-button::after {content: ' ';position: fixed;bottom: 0!important;height: 68rpx!important;width: 100%;background: #fff;
}

这样就可以在IphoneX手机的底部增加68rpx的空白区域。

小程序适配IphoneX相关推荐

微信小程序适配iPhoneX底部小黑条
微信小程序适配 iPhone X 底部小黑条一.在 app.js 中获取到设备信息 getSystemInfo 获取设备信息,然后将底部距离保存到 globalData 中方便页面读取当然如果项目 ...
微信小程序适配iphoneX，XR，12等机型的底部安全区域
问题如下: 适配之前iPhone5界面如下: iPhone12界面如下: 为了适配所有的手机机型,需要获取到底部小黑条的高度,给固定在底部的view设置padding-bottom,增加高度:(有些手 ...
微信小程序适配iphonex
// 在app.js中判断是否是哪种设备 globalData: { isIphoneX: false, userInfo: null }, onShow:function(){ let that = ...
uniapp小程序适配异形屏
uniapp小程序适配异形屏 App.vue写入底部适配横线小程序自定义顶部适配 App.vue写入 globalData: { // 适配刘海屏test: false,statusBarHeig ...
[微信小程序]适配各个不同机型屏幕
微信小程序该如何适配各个机型屏幕我们知道在原始设备中, iOS有pt,安卓有dp(密度无关像素), 但是无论在原生开发语言还是在React-native中, 我们处理屏幕适配, 都可以采用动态获取当 ...
小程序适配H5端跨域问题解决
小程序本身自带有解决跨域的方法,但是当小程序运行到浏览器的时候,由于写小程序的时候并没有处理跨域,所以H5端做相同的axios请求,小程序没有报错,H5端却会报错解决方法: 我们需要到manifes ...
uniapp苹果无法上架_uni-app开发小程序适配苹果端采坑总结
不得不说,任何一个开发者遇到苹果手机都会或多或少需要做适配,在使用uni-app开发小程序时,我就发现不少需要兼容的地方,今天做个小结 1.由于页面大多数内容都是动态获取,当页面高度不给固定值时,让其 ...
微信小程序转钉钉小程序适配问题
与阿里云项目合作,作为ISV,不能使用腾讯系产品,必须将微信小程序转成钉钉小程序. 经过12天的艰苦奋斗,基本完成.将经验教训整理一下给大家. 不支持wxs,无法自定义页面函数很方便的{{mc.to ...
微信小程序适配iPhone X
1.获取设备型号 App({// 全局数据globalData: {// 其他数据定义 ...isIPX: false, // 当前设备是否为 iPhone X},// 小程序启动入口onLaunch ...

小程序适配IphoneX

小程序适配IphoneX相关推荐

最新文章

热门文章