微信小程序iPhone X适配

iPhone X适配

由于 iPhone X 屏幕顶部状态栏区域有刘海屏,以及在屏幕底部增加了操作条,在开发中需适配机型

最近开发微信小程序:在iPhone X, XS, XR, XS Max机型适配,我在项目中写了iPhone X适配的方法,在其它几个屏下也差不多(这里就没有详细适配)

ps: 抽时间记录下,以下是个人使用方案(仅供参考),欢迎大神们指教…

效果图

在这里插入图片描述

设计稿对比图

在这里插入图片描述

1. 通过getSystemInfo获取信息

通过 wx.getSystemInfo API获取相关数据。可以根据该方法返回的手机型号字段 model是否包含iPhone X 字符串来判断设备,也可以根据媒体查询来判断。

  • 下图展示真机调试模拟器所获取数据。

在这里插入图片描述

步骤如下:

综合上面得到的相关信息,通过model值进行判断。

注意: 模拟器model值跟真机上是不一样的,这里通过search()来检索字符串

  • app.js文件中 创建全局变量,然后获取设备型号
  • 在需要的页面.jsonload中获取app.js定义的全局变量isIPhoneX
  • wxml中判断为iPhoneX添加类名
  • wxss中添加需要的样式即可
app.js
App({
    // 小程序启动入口
    onLaunch: function (options) {
        // 获取设备信息
        this.getSystemInfo()
    },

    /**
    * 全局数据
    */
    globalData: {
        isIPhoneX: false, //当前设备是否为 iPhone X
    },

    /**
    * 获取设置信息
    */
    getSystemInfo: function() {
        let that = this;
        wx.getSystemInfo({
            success: function(res) {
                console.log('获取系统信息', res);
                let models = res.model;
                if (models.search('iPhone X') != -1) {
                    that.globalData.isIPhoneX = true
                }
            }
        });
    },
})
index.js
//在data中这样获取模拟器上有效果, 真机上不行(请大神指教)
data: {
    // isIphoneX: app.globalData.systemInfo.model == "iPhone X" ? true : false,
},

onLoad: function (options) {
    let that = this;
    //获取iphoneX..
    let isIPhoneX = app.globalData.isIPhoneX;
    if (isIPhoneX) {
        that.setData({
            isIPX: isIPhoneX
        })
    }
}
index.wxml
<view class="{{isIPX ? 'isIPXActives' : ''}}">tabbar</view>
/ 
<!-- 当元素上有类名时可以这样写 -->
<view class="tabbarBox {{isIPX ? 'isIPXActives' : ''}}">tabbar</view>
index.wxss
.isIPXActives {
    // 操作条
    padding-bottom: 68rpx;
}

2. 媒体查询方法

可以根据高度Dpr判断

/* iPhone X, iPhone XS */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .testBox {
        font-size: 68rpx;
    }
}

/* iPhone XR */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
    .testBox {
       font-size: 78rpx;
    }
}

/* iPhone XS Max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
    .testBox {
       font-size: 78rpx;
    }
}



/*  以下这种写法iPhone X XS XR XS Max统一设置样式(发现有些项目中这样写不起作用?) */
@media screen and (min-device-height: 812px) and (max-device-height: 896px) {
    .userInfoBox {
        height: 44%;
    }
    .infoListBox {
        height: 56%;
    }
}

3. 小结

感谢 https://blog.csdn.net/qq_33608748/article/details/82769570整理的知识

iOS适配所用到的切图及对应机型

在这里插入图片描述

4. 通过设置viewport-fit方法

说明: 这是iOS11 新增特性,苹果公司为了适配iPhoneX 对现有 viewport meta标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:

  1. contain: 可视窗口完全包含网页内容(左图)
  2. cover:网页内容完全覆盖可视窗口(右图)
  3. auto:默认值,跟 contain 表现一致

注意: 网页默认不添加扩展的表现是 viewport-fit=contain,需要适配 iPhoneX 必须设置 viewport-fit=cover,这是适配的关键步骤。

env 函数

iOS11新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:

  • safe-area-inset-left:安全区域距离左边边界距离
  • safe-area-inset-right:安全区域距离右边边界距离
  • safe-area-inset-top:安全区域距离顶部边界距离
  • safe-area-inset-bottom:安全区域距离底部边界距离

说明: 这里我们只需要关注 safe-area-inset-bottom这个变量,因为它对应的就是小黑条的高度(横竖屏时值不一样)。

<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> -->
<meta name="viewport" content="... viewport-fit=cover">
.btn {
	/* 底部 */
	padding-bottom: env(safe-area-inset-bottom);
	/* 顶部 */
	padding-top: env(safe-area-inset-top);
}

参考文章

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值