微信小程序中的iPhone X适配问题

小程序中下方的导航会被iPhone X下面的那条黑线盖住【微笑脸】，所以要专门为了iPhone X做样式上的适配【微笑脸】

wx.getSystemInfo({success: function (res) {//console.log(res.model)//console.log(res.language)//zh_CN(en)//console.log(res.model=="iPhone X")if (res.model=="iPhone X") {that.globalData.isIPX = 1;}}})

但是呢，好在官方文档里有给出API可以获取到设备的信息，判断之后去给class添加样式就可以啦

class="{{isIPX?'isIPX':''}}"

.isIPX {bottom: 68rpx !important;
}

关于这个68rpx，贴上解释链接(哈哈这个方法就是在这里学到的略略略)http://www.jb51.net/article/129396.htm点击打开链接

微信小程序中的iPhone X适配问题相关推荐

微信小程序中的iPhone X适配解决
原因: 微信小程序在适配iphone x 的时候底部的横线会出现遮挡如图: 解决方案: 步骤一:在app.js文件中创建全局变量,然后获取设备型号 globalData: { isIp ...
微信小程序canvas大小、定位适配
微信小程序canvas大小.定位适配在微信小程序canvas开发中,遇到一种情况:在iPhone X调好的定位大小,把机型调整为iPhone 5,由于iPhone5屏幕较小,canvas画出的内容就 ...
html5苹果x底部满屏,iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配...
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 前言在苹果 iPho ...
html img 手势缩放,微信小程序中利用image组件实现图片手势缩放
微信小程序中利用image组件实现图片手势缩放,前端大神严灏的牛文,讲解了微信小程序中image组件的三种是缩放模式,三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片. 原 ...
记一次在Taro开发的微信小程序中使用lottie动画的经验
前景提要最近在做公司项目的时候,看到移动端开发用的小图标有动态效果,非常好玩了解到是使用lottie进行实现的,这个东西以前有看到过对应的插件库,但是一直没有时间做研究,趁着这个五一就抽一天时间,去 ...
微信小程序中rpx和px的区别？
大家用微信开发,肯定会接触到一个新的像素单位"rpx". 那么"rpx"跟之前我们进行网页开发的"px"相比较有什么区别呢? 查看微信文档, ...
微信小程序setinterval_微信小程序中setInterval的使用方法
微信小程序中setinterval的使用方法看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
微信小程序中this指向作用域问题this.setData is not a function报错
在微信小程序中我们一般通过以下方式来修改data中的数据 this.setData({index1: e.detail.value}) 比如在函数里面修改数据 bindFaChange1: funct ...

微信小程序中的iPhone X适配问题

微信小程序中的iPhone X适配问题相关推荐

最新文章

热门文章