1、获取设备型号

App({
// 全局数据
globalData: {
// 其他数据定义 ... isIPX: false, // 当前设备是否为 iPhone X
}, // 小程序启动入口
onLaunch: function (options) {
// 其他启动代码... // 判断设备是否为 iPhone X
this.checkIsIPhoneX()
}, checkIsIPhoneX: function() {
const self = this
wx.getSystemInfo({
success: function (res) {
// 根据 model 进行判断
if (res.model.search('iPhone X') != -1) {
self.globalData.isIPX = true
}
// 或者根据 screenHeight 进行判断
// if (res.screenHeight == 812) {
// self.globalData.isIPX = true
// }
}
})
},

NOTE:

这里有一个小坑需要注意,在微信开发者工具中的模拟器,如果选择为 iPhone X,此时获取到的 model 值为 iPhone X,导致我以为真机也是这个值,于是直接用 if (model == 'iPhone X') 来判断,但其实真机下 model 的值为这种格式: iPhone X (GSM+CDMA)<iPhone10,3>,因此我们需要用字符串检索匹配进行判断

微信小程序适配iPhone X的更多相关文章

  1. 微信小程序适配iphoneX的实现方法

    一. 安全区域(safe area) 与iPhone6/6s/7/8相比,iPhone X 无论是在屏幕尺寸.分辨率.甚至是形状上都发生了较大的改变,下面以iPhone 8作为参照物,先看看iPhon ...

  2. 微信小程序适配iphonex

      // 在app.js中判断是否是哪种设备 globalData: { isIphoneX: false, userInfo: null }, onShow:function(){ let that ...

  3. 微信小程序开源

    | UI组件 | | | | | | | | | weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库 | | | | | | zanui-weapp ★794 - 好用易扩展的小程 ...

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

    微信小程序中的iPhone X适配问题 小程序中下方的导航会被iPhone X下面的那条黑线盖住[微笑脸],所以要专门为了iPhone X做样式上的适配[微笑脸] wx.getSystemInfo({ ...

  5. 如何解决微信小程序界面适配问题-引用-生命周期回调函数-优化机制-样式引入

    如何解决微信小程序界面适配问题 .wxss page{ height: 100%; width:750rpx; } this.setData({ imageWidth: wx.getSystemInf ...

  6. 小程序学习-iPhone X适配

    一.  安全区域(safe area) 与iPhone6/6s/7/8相比,iPhone X 无论是在屏幕尺寸.分辨率.甚至是形状上都发生了较大的改变,下面以iPhone 8作为参照物,先看看iPho ...

  7. 用 React 编写的基于Taro + Dva构建的适配不同端(微信小程序、H5、React-Native 等)的时装衣橱

    前言 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表 ...

  8. 从0到1构建适配不同端(微信小程序、H5、React-Native 等)的taro + dva应用

    从0到1构建适配不同端(微信小程序.H5.React-Native 等)的taro + dva应用 写在前面 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种 ...

  9. 精确计算微信小程序scrollview高度,全机型适配

    众所周知,可以滑动的 scroll 组件在移动端非常的重要,几乎每个页面都要用到. 而小程序的 scroll-view 组件就比较坑了,非得指定一个高度才能正常使用.布局复杂的时候谁还给你算高度啊.. ...

随机推荐

  1. CC2530的ADC采集外部电压

    初窥ZIGBEE 要在zigbee的组网中加入烟雾传感器的模块,所以需要用到cc2530的ADC对传感器输出的模拟信号进行采样.下面是自己对实现用CC2530的ADC采集外部电压的程序过程. 以下是A ...

  2. Azure Blob (三)参数设置说明

    一,引言 上一篇将 Azure Blob 存储的时候,有使用到一个 .NET  Core Web 项目,通过代码的方式进行操作 Azure Blob 的数据,接着上一篇的内容,今天继续看一下代码,具体 ...

  3. PyTorch ResNet 使用与源码解析

    本章代码:https://github.com/zhangxiann/PyTorch_Practice/blob/master/lesson8/resnet_inference.py 这篇文章首先会简 ...

  4. Django进入监听端口就自动打开指定页面,无需导航栏手动添加(Django六)

    在我们进入监听端口时画面如下:而因为在urls.py中写过如下语句 我们在监听端口后加上/login就会跳转到login.html页面,如下图 那么如何一打开监听端口就可以走动跳转到login.htm ...

  5. shell字体颜色应用

    输出特效格式控制: \033[0m  关闭所有属性   \033[1m   设置高亮度   \03[4m   下划线   \033[5m   闪烁   \033[7m   反显   \033[8m   ...

  6. 突然虚拟机无法联网解决办法,且报错Failed to start LSB: Bring up/down

    使用sudo service network restart去启动网络时起不来 使用systemctl status network.service查看网络状态也是failed,且报错Failed t ...

  7. [LeetCode]739. 每日温度(单调栈)

    题目 根据每日 气温 列表,请重新生成一个列表,对应位置的输入是你需要再等待多久温度才会升高超过该日的天数.如果之后都不会升高,请在该位置用 0 来代替. 例如,给定一个列表 temperatures ...

  8. .net MVC4.0项目发布到阿里云虚拟主机中遇到的问题。

    正所谓学以致用,今天本来想做个bootstrap的demo发到服务器上看一下效果,结果服务器搞了半天,最终太晚了没能学到什么东西. 首先写好页面之后我做了一个MVC4.0的网站项目,然后把Bootst ...

  9. 使用GO实现Paxos分布式一致性协议

    什么是Paxos分布式一致性协议 最初的服务往往都是通过单体架构对外提供的,即单Server-单Database模式.随着业务的不断扩展,用户和请求数都在不断上升,如何应对大量的请求就成了每个服务都需 ...

  10. Shell编程(3)

    1. shell流程控制 2. for语句 3. while语句 4. break和continue语句 5. case语句 6. shell编程高级实战 shell流程控制 流程控制是改变程序运行顺 ...