微信小程序适配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 组件就比较坑了,非得指定一个高度才能正常使用.布局复杂的时候谁还给你算高度啊.. ...
随机推荐
- 入门alibaba的EasyExcel
一.关于EasyExcel 1.什么是EasyExcel,有什么作用? EasyExcel是一个基于Java的简单.省内存的读写Excel的开源项目.在尽可能节约内存的情况下支持读写百M的Excel. ...
- 双向绑定数据的实现(new Proxy 版本)
调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- 文件操作和OS模块的简单操作
文件的作用 大家应该听说过一句话:“好记性不如烂笔头”. 不仅人的大脑会遗忘事情,计算机也会如此,比如一个程序在运行过程中用了九牛二虎之力终于计算出了结果,试想一下如果不把这些数据存放起来,相比重启电 ...
- [Java并发编程之美]第1章 线程基础 补充知识
1.2线程创建与运行 创建线程有三种方式: 继承Thread类并重写run方法: 实现Runnable接口的run方法,new Thread时将该类对象作为参数传入: 实现Callable接口的cal ...
- [程序员代码面试指南]数组和矩阵-数组的partition调整
题目 补充问题:数组只含0,1,2,对数组排序,要求时间复杂度O(n),额外空间复杂度O(1) 题解 维护三个变量,l,idx,r.左区间[0,l],中间区间[l+1,idx],右区间[idx+1,r ...
- Git进阶之路:配置git同时推送github和gitee仓库
1. 进入工程根目录打开.git文件夹(需要显示隐藏文件夹) 2. 打开.git文件夹下的config文件进行编辑添加github和gitee仓库地址 3. 推送验证 github提交记录 gitee ...
- vue-router-next 通过hash模式访问页面不生效,直接刷新页面一直停留在根路由界面的解决办法
vue3中,配合的vueRouter版本更改为vue-router-next通过 npm i vue-router@next 的方式进行引入添加,随后创建 router.js,在main.js里面引入 ...
- redis入门指南(七)—— 安全、协议、管理工具及命令属性
写在前面 学习<redis入门指南>笔记,结合实践,只记录重要,明确,属于新知的相关内容. 安全 1.可以使用bind参数绑定一个地址,使redis只接受这个地址的连接. 2.使用requ ...
- 《Java从入门到失业》第四章:类和对象(4.5):包
4.5包 前面我们已经听过包(package)这个概念了,比如String类在java.lang包下,Arrays类在java.util包下.那么为什么要引入包的概念呢?我们思考一个问题:java类库 ...
- 新版 C# 高效率编程指南
前言 C# 从 7 版本开始一直到如今的 9 版本,加入了非常多的特性,其中不乏改善性能.增加程序健壮性和代码简洁性.可读性的改进,这里我整理一些使用新版 C# 的时候个人推荐的写法,可能不适用于所有 ...