微信小程序屏幕适配不同的iPhone

wx.getSystemInfo(Object object) | 微信开放文档

wx.getSystemInfo({success (res) {console.log(res.model)console.log(res.pixelRatio)console.log(res.windowWidth)console.log(res.windowHeight)console.log(res.language)console.log(res.version)console.log(res.platform)}
})

苹果手机不同机型在同一个系统下状态栏的高度可能不同，从ios14开始，刘海屏手机的状态栏不一定是44，ios14系统增加了一个隐私提示灯功能，因此ios14之前状态栏高度：有刘海屏iPhone为44，无刘海屏为20。
但是从ios14开始有刘海屏的iPhone状态栏高度不一定是44了。如：
iPhoneXR,iPhone11 状态栏高度为48，
iPhone X，iPhone 11 Pro，iPhone 11 Pro Max，iPhone 12 mini，状态栏高度44，
iPhone 12，iPhone 12 Pro，iPhone 12 Pro Max，状态栏高度为47.

iPhone 13 mini状态栏高度为50，

iPhone 13，iPhone 13 Pro，iPhone 13 Pro Max，状态栏高度为47.

ihoneX

通过ihoneX真机打印手机信息参数model包含手机型号信息

通过ihone6s真机打印手机信息参数model包含手机型号信息

所有设备型号官网地址：Models - The iPhone Wiki

或
https://gist.github.com/adamawolf/3048717

由于刘海屏的状态栏的高度不固定，但是都是大于20的，非刘海屏的状态栏都是20，

所以判断是iPhone刘海屏机型的条件就可以是：model带iPhone字样 && statusBarHeight > 20，我们写一个全局变量在app.js文件中：

在onLaunch方法中加入下面代码

var _this = this;wx.getSystemInfo({success: function (res) {console.log('手机设备信息',res);// 判断设备是否为刘海屏if (res.model.indexOf("iPhone") >= 0 && (res.statusBarHeight > 20)) {_this.globalData.isIPhoneXSeries = true;_this.tabbarSafeBottomMargin = res.screenHeight - res.safeArea.bottom}}})

ios开发屏幕适配pt和px之间的换算，小程序开发px和ios开发的px不等同

vh_CSS3属性_CSS参考手册 - html中文网

用法：

const app = getApp()

//注意获取的tabmargin的单位是px而不是rpx，刘海屏手机上tabmargin的大小都是34px，在ios开发中用的是tabmargin是34pt，微信小程序开发px和ios开发的px不完全等同的

微信小程序屏幕适配不同的iPhone相关推荐

微信小程序 - 屏幕适配
现在大部分公司的UI.UE都已经采用了蓝湖这款工具,主要在于扩展性较强,故此篇我们借鉴于蓝湖的尺寸~ 思考 1.移动端的适配方式是否与前端网页的适配方式相同? 移动端的适配一般都会在不同手机分辨率下设 ...
微信小程序中适配iphoneX兼容性
今天做一个功能,需要兼容iphoneX系列以及11.12以上的设备的兼容性,由于微信小程序在适配iphone x 的时候底部的横线会出现遮挡如图: 于是乎就翻了翻小程序的API文档,果不其然在小程序 ...
微信小游戏屏幕适配方案
首发于我的个人博客-微信小游戏屏幕适配很久没有发文了,最近一直在研究微信小游戏,屏幕适配问题真的是哪里都存在. 无奈论坛资料及可行的解决方案还是太少,还是得靠自己. 且来看一看在微信上如何达到适配多 ...
【IoT】产品设计：微信小程序如何适配不同机型
rpx是小程序中的尺寸单位,它有以下特征: 小程序的屏幕宽固定为750rpx,即750个物理像素,1rpx=(screenWidth / 750)px,其中screenWidth为手机屏幕的实际的宽度 ...
微信小程序 - 屏幕亮度调节
为什么80%的码农都做不了架构师?>>> 最近使用微信小程序API wx.setScreenBrightness(OBJECT) 和 wx.getScreenBrightnes ...
vue/微信小程序标题栏适配
目录背景自定义标题 custom-page-title 原理解决办法: PS.注意代码使用示例使用注意参考资料背景 vue 编写小程序代码,打包为小程序,小程序原有title样式不太符 ...
微信小程序----布局适配与物理逻辑像素
屏幕尺寸屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米. 比如常见的屏幕尺寸有2.4.2.8.3.5.3.7.4.2.5.0.5.5.6.0等如何计算手机尺寸? 知道手机屏幕的长和 ...
微信小程序-屏幕高度分析详解
screenheight代表手机屏幕的高度(包括最上方状态栏和webview渲染区域和tabbar与导航栏) windowHeight代表webview区域,不包含状态栏和导航栏和tabbar, 如果 ...
微信小程序屏幕适配器
屏幕适配器的作用是兼容不同型号的手机,进行适配,下面我用的是单独写个页面进行实现. 首先我们看到的是wxml页面: <view class="content">< ...

微信小程序屏幕适配不同的iPhone

微信小程序屏幕适配不同的iPhone相关推荐

最新文章

热门文章