微信小程序屏幕适配不同的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

### 屏幕适配方法与实现方案 微信小程序提供了多种屏幕适配方案,以确保在不同尺寸的设备上能够实现良好的显示效果和用户体验。 #### 使用 `rpx` 单位进行自适应 微信小程序中推荐使用 `rpx`(responsive pixel)作为尺寸单位,这种单位可以根据屏幕宽度进行自适应。在 iPhone6 上,屏幕宽度为 375px,共有 750 个物理像素,因此 750rpx = 375px = 750 物理像素,得出公式:1 rpx = 0.5 px = 1 物理像素。通过使用 `rpx`,开发者可以直接将设计稿上的像素转换为小程序中的单位,而无需担心不同设备的分辨率差异 [^4]。 #### 使用媒体查询(`@media`)进行适配 对于字体大小和模块高度的适配,可以使用 CSS 的媒体查询功能。例如,在宽度小于 360px 的屏幕上使用 `rpx` 单位,而在宽度大于等于 360px 的屏幕上使用 `px` 单位。以下是一个具体的代码示例: ```css .item-col { margin: 0px 3px 0px 2px; } @media only screen and (min-width: 420px) { .item-col { margin: 0px 13px 0px 12px; } } .font15 { font-size: 15px; } @media only screen and (max-width: 360px) { .font15 { font-size: 30rpx; } } ``` #### 使用 `mp-row` 和 `mp-col` 进行大屏适配 对于大屏幕(如 iPad),可以使用微信小程序提供的 `mp-row` 和 `mp-col` 组件进行布局。这些组件可以帮助开发者更方便地实现响应式布局。以下是一个具体的代码示例: ```html <mp-row> <block wx:for="{{list}}" wx:key="index"> <view class="item-col"> <mp-col xs="{{24}}" span="{{12}}"> <template is="qualityItem" data="{{...item,...{index: index} }}" /> </mp-col> </view> </block> </mp-row> ``` 需要注意的是,在使用 `mp-row` 和 `mp-col` 时,可能会遇到点击事件无法响应的问题。解决这个问题的方法是在 `mp-col` 外部包裹一层 `view` 元素 [^3]。 #### 操作方式适配 微信小程序可以在不同的终端上运行,例如手机和电视。为了适配不同的操作方式,可以使用触摸事件(如 `touchstart`、`touchmove`、`touchend`)和遥控器事件(如 `keydown`、`keypress`)。此外,还可以通过自定义组件的方式,为不同设备编写不同的操作逻辑 [^2]。 #### 边框适配方案 在某些情况下,需要处理小程序中的边框问题。例如,使用 `border-image` 方案可以更好地适配不同设备上的边框效果 [^5]。 ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值