微信小程序适配iPhone X
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的更多相关文章
- 微信小程序适配iphoneX的实现方法
一. 安全区域(safe area) 与iPhone6/6s/7/8相比,iPhone X 无论是在屏幕尺寸.分辨率.甚至是形状上都发生了较大的改变,下面以iPhone 8作为参照物,先看看iPhon ...
- 微信小程序适配iphonex
// 在app.js中判断是否是哪种设备 globalData: { isIphoneX: false, userInfo: null }, onShow:function(){ let that ...
- 微信小程序开源
| UI组件 | | | | | | | | | weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库 | | | | | | zanui-weapp ★794 - 好用易扩展的小程 ...
- 微信小程序中的iPhone X适配问题
微信小程序中的iPhone X适配问题 小程序中下方的导航会被iPhone X下面的那条黑线盖住[微笑脸],所以要专门为了iPhone X做样式上的适配[微笑脸] wx.getSystemInfo({ ...
- 如何解决微信小程序界面适配问题-引用-生命周期回调函数-优化机制-样式引入
如何解决微信小程序界面适配问题 .wxss page{ height: 100%; width:750rpx; } this.setData({ imageWidth: wx.getSystemInf ...
- 小程序学习-iPhone X适配
一. 安全区域(safe area) 与iPhone6/6s/7/8相比,iPhone X 无论是在屏幕尺寸.分辨率.甚至是形状上都发生了较大的改变,下面以iPhone 8作为参照物,先看看iPho ...
- 用 React 编写的基于Taro + Dva构建的适配不同端(微信小程序、H5、React-Native 等)的时装衣橱
前言 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表 ...
- 从0到1构建适配不同端(微信小程序、H5、React-Native 等)的taro + dva应用
从0到1构建适配不同端(微信小程序.H5.React-Native 等)的taro + dva应用 写在前面 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种 ...
- 精确计算微信小程序scrollview高度,全机型适配
众所周知,可以滑动的 scroll 组件在移动端非常的重要,几乎每个页面都要用到. 而小程序的 scroll-view 组件就比较坑了,非得指定一个高度才能正常使用.布局复杂的时候谁还给你算高度啊.. ...
随机推荐
- cookie和session讲解
1.cookie是什么? 保存在浏览器本地上的一组组键值对 2.session是什么? 保存在服务器上的一组组键值对 3.为什么要有cookie? HTTP是无协议状态,每次请求都是互相独立的,没有办 ...
- 面经手册 · 第10篇《扫盲java.util.Collections工具包,学习排序、二分、洗牌、旋转算法》
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 算法是数据结构的灵魂! 好的算法搭配上合适的数据结构,可以让代码功能大大的提升效率. ...
- pytest文档2-pytest+Allure+jenkins+邮箱发送
前言: 上一章节讲解了tomcat+jenkins的环境搭建,这一章节主要讲一下Allure报告在jenkins上的配置 步骤: 1.新建一个item 2.输入项目的名称,选择自由风格,点击保存 3. ...
- 第1课 - make和makefile
第1课 - make 和 makefile 1. make make 是一个应用程序,位于 /usr/bin/make 目录下,make 有如下的功能: (1)解析源程序之间的依赖关系 (2)根据依赖 ...
- 万字详解 TDengine 2.0 数据复制模块设计
导读:TDengine分布式集群功能已经开源,集群功能中最重要的一个模块是数据复制(replication),现将该模块的设计分享出来,供大家参考.欢迎大家对着设计文档和GitHub上的源代码一起看 ...
- Java垃圾回收System.gc()的理解
System.gc()无法保证GC一定执行 在默认情况下,通过System.gc()或者Runtime.getRuntime().gc()的调用,会显式触发Full GC,同时对老年代和新生代进行回收 ...
- day52:django:ORM单表/多表操作
目录 1.ORM 2.ORM单表增删改查 13个必知必会的查询接口 filter基于双下划线的模糊查询 3.ORM多表增删改查 ORM 什么是ORM? ORM(object relational ma ...
- 精心总结ansible-playbook剧本的这6种变量
#变量作用 #根据需求灵活修改,如:需要安装不同版本号的服务,或进行版本升级回退等 1.通过vars定义变量 #1.1.定义一个变量 version: 1.1.2 #定义多个变量 vars: - v1 ...
- VMware虚拟机ubuntu下安装VMware Tools步骤
双击VMware Tools进入 找到后缀.tar.gz的压缩文件 将压缩文件复制到home目录下,home目录即左侧的主目录文件夹 打开命令行终端,默认应该就是home目录,如果不是home目录,在 ...
- 浅谈 Java线程状态转换及控制
线程的状态(系统层面) 一个线程被创建后就进入了线程的生命周期.在线程的生命周期中,共包括新建(New).就绪(Runnable).运行(Running).阻塞(Blocked)和死亡(Dead)这五 ...