微信小程序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.youkuaiyun.com/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);
}

参考文章