微信小程序适配iphoneX的实现方法

1.安全区

与iPhone6/6s/7/8相比，iPhone X在屏幕尺寸、分辨率甚至外形上都发生了很大的变化。我们以iPhone 8为参考，先来看看iPhone X尺寸的变化：

苹果对iPhone X的设计布局的看法如下：

核心内容应位于安全区域，以确保其不会被设备的角落、传感器外壳(齐)和底部的主页指示器阻挡。也就是说，我们设计和展示的内容要尽可能放在安全的区域；

第二，h5页面适配

1.视口拟合的元标签被用作自适应方案；视口拟合的默认值是自动。

视口拟合的值如下：

自动默认：view prot-fit : contain；页面内容显示在安全区域的cover viewport-fit:cover中，页面内容充满屏幕。

2.介绍css常量()函数和安全区域-插入-顶部安全区域-插入-左侧安全区域-插入-右侧安全区域-插入-底部。

当我们设置viewport-fit:contain时，这是默认时间；设置安全区域插入左侧、安全区域插入右侧、安全区域插入顶部和安全区域插入底部没有效果。当我们设置视口-fit:cover时，设置如下

车身{ padding-top:常量(安全区域-插图-顶部)；//导航栏状态栏88px padding-left:的高度是否恒定(安全区-插图-左侧)；//0填充-右侧：常量(安全区-插入-右侧)如果屏幕不垂直；//0填充-底部：常量(安全区域-插入-底部)如果屏幕不垂直；//是底弧34px} III的高度。小程序改编

视口适配的适配方案不适合小程序。目前iPhone X等异形屏幕没有专门的界面或字段，小程序底部的标签栏对iPhone X的适配只是简单的增加了一个白色的底部栏，改善了原来标签栏的位置。我们只能通过wx.getSystemInfo接口获取设备信息，使用如下：

wx . getsystem info({ success : function(RES){ if(RES . model==' iphonrx ')} { this。setdata({ isi phone x : true })} })，其中model是设备型号等信息。如果型号值为iphonerx，则设备可以视为iPhone X，我们在条目文件app.js中勾选，然后全局添加一个isIphoneX字段。

Wxml部分：

view class=' button-group { { ISIPhoneX '？Fix-iphonex-button':''} '这是一个底部吸附按钮区域/视图wxss部分：fix-iphonex-button { bottom :68 rpx！重要；}.{ content : }之后的fix-iphonex-button :位置：固定；底部： 0！重要；高度： 68rpx！重要；宽度： 100%；背景# fff}至于为什么采用68rpx，

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。