小程序兼容各个ios版本

本篇文章记录的是小程序兼容的ios 6.7.7 ,plus, x及xs等等，最后方式设计人员应该看懂的设计方式（会了才能开发设计搞…）

第一、各个iphone的尺寸

绝对是帮你解决各种问题的表，对应微信开发工具去设置，还用什么测试机，省省省。

第二、考虑各种iPhone x的留海底部，安全区域

真正的代码放着了
界面没有用rpx 用的是 px. 所以我这里就没乘2了，
下面的49是底部有个按钮
1.带x的都有刘海，注意底部，安全区域。
2.xr是特殊的x, 他是@2x的图，
3.我们开发在设计界面上，概率尺寸就行，分辨是和对应的iphone版本换图才会用到，

wx.getSystemInfo({     //获取窗口信息  设置筛选的高度success: function (res) {console.log(res)var heightNum = res.windowHeightthat.setData({heightbox : heightNum })if (res.model.indexOf('iPhone XR') != -1) {    //这个比较特殊heightNum = heightNum - 49 - 34;that.setData({scrollHeight: heightNum,paddingb: 34});} else if (res.model.indexOf('Plus') != -1){heightNum = heightNum - 49;that.setData({scrollHeight: heightNum,});} else if (res.model.indexOf('iPhone X') != -1){heightNum = heightNum - 49 - 34;that.setData({scrollHeight: heightNum,paddingb: 34});} else {heightNum = heightNum - 49;that.setData({scrollHeight: heightNum,});}}

放一张开发图

例外有人通过分辨率来设计宽高，这里我就不指手画脚，因为我没有试过（着急解决问题），后面试试！
放一个简单的demo

wx.getSystemInfo({success: function (res) {that.setData({//动态根据手机分辨率来计算内容的高度（屏幕总高度-顶部筛选栏的高度）contentHeight: (res.windowHeight - 72 * res.screenWidth / 750)});}});

3.设计人员请看

对设计稿有详细的了解描述

小程序兼容各个ios版本相关推荐

微信小程序软件测试junit,微信小程序兼容性能测试方法
本文为微信小程序兼容.性能测试方法介绍. 兼容操作系统兼容由于小程序依赖微信客户端本身,因此理论上来说只要微信客户端兼容的小程序应该都可以兼容,这里推荐覆盖Android和iOS主流版本系统即可, ...
微信小程序0.11.122100版本新功能解析
微信小程序0.11.122100版本新功能解析我的知乎专栏-小楼昨夜又秋风 https://zhuanlan.zhihu.com/oldtimes 新版本就不再吐槽了,整的自己跟个愤青似的.人老了, ...
今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2...
今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 查官方文档解决方法在 PowerShell中运行以下内容, 然后重启服务器 # Enab ...
微信小程序开发手册离线版本-下载
微信小程序微信官方日前发布了关于小程序的帮助手册,起地址为: https://mp.weixin.qq.com/debug/wxadoc/dev/ 如果需要最新离线版,可以打开 https://we ...
抖音壁纸小程序v1.0.2版本功能，新增达人入住功能
抖音壁纸小程序v1.0.2版本功能抖音壁纸小程序源代码此次新增和优化功能如下: 达人入住达人审核收益管理下载壁纸页面UI优化素材管理素材上传新增抖音图片检测接口消息通知达人搜索收 ...
uniapp 微信小程序开发解决旧版本缓存
1.uniapp 微信小程序如何解决旧版本缓存问题在小程序发布新版本后,小程序端是异步更新,新版本覆盖较慢.如果用户之前已经打开过小程序,通过热启动再进入小程序时,可能访问的还是旧版本,需要一段 ...
微信小程序中苹果iOS手机显示时间格式NaN不正确的问题
项目场景: 实现安卓Android和苹果iOS中微信小程序显示订单时间信息问题描述微信小程序中苹果iOS手机显示时间格式NaN不正确的问题原因分析: 安卓微信小程序显示正常,苹果按格式YYYY- ...
小程序textarea在ios中内边距的解决办法
小程序textarea在ios中内边距的解决办法官方文档上面有一个 disable-default-padding 属性去除在ios上面的内边距
uni-app app 跳转微信小程序（安卓/ios）
uni-app app 跳转微信小程序(安卓/ios) 近日接到需求,需要实现在 app 中直接跳转到微信小程序中,其实非常简单,uni-app 都已经集成好了. 安卓和ios 有点区别,这个需要注 ...

小程序兼容各个ios版本

第一、各个iphone的尺寸

第二、考虑各种iPhone x的留海底部，安全区域

小程序兼容各个ios版本相关推荐

最新文章

热门文章