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

站长资源 2024/11/26 佚名

8 1538 8

DDR爱好者之家 Design By 杰米

一、安全区域(safe area)

与iPhone6/6s/7/8相比，iPhone X 无论是在屏幕尺寸、分辨率、甚至是形状上都发生了较大的改变，下面以iPhone 8作为参照物，先看看iPhone X尺寸上的变化：

苹果对于 iPhone X 的设计布局意见如下：

核心内容应该处于 Safe area 确保不会被设备圆角(corners)，传感器外壳(sensor housing，齐刘海) 以及底部的 Home Indicator 遮挡。也就是说我们设计显示的内容应该尽可能的在安全区域内；

二、h5页面适配

1、viewport-fit的meta标签作为适配方案；viewport-fit的默认值是auto。

viewport-fit取值如下：

auto 默认：viewprot-fit:contain;页面内容显示在safe area内 cover

viewport-fit:cover,页面内容充满屏幕

2、css constant()函数与safe-area-inset-top & safe-area-inset-left & safe-area-inset-right & safe-area-inset-bottom的介绍.

当我们设置viewport-fit:contain,也就是默认的时候时;设置safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom等参数时不起作用的。当我们设置viewport-fit:cover时：设置如下

body {

  padding-top: constant(safe-area-inset-top);  //为导航栏+状态栏的高度 88px      

  padding-left: constant(safe-area-inset-left);  //如果未竖屏时为0        

  padding-right: constant(safe-area-inset-right); //如果未竖屏时为0        

  padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px    

}

三、小程序适配

viewport-fit的适配方案不适合小程序。目前也没有看到小程序有对iPhone X等异形屏有特殊的接口或字段。小程序本身的底部tab栏对iPhone X的适配也只是简单的加了一个白色底栏，提高了原有tab栏的位置。我们只能通过 wx.getSystemInfo 接口取获取设备信息，该接口使用方法如下：

wx.getSystemInfo({

   success: function (res) {

      if (res.model == 'iphonrx') {

         this.setData({

            isIphoneX: true

         })

      }

   }

})

其中 model 便是设备的型号等信息，如果 model 值为iphonerx ，便可认为该设备为iPhone X，我们在入口文件 app.js 中去进行检测，然后在全局增加一个 isIphoneX 字段。

wxml部分：

<view class="button-group {{isIphoneX ">这是一个吸底按钮区域</view>

wxss部分：

.fix-iphonex-button {
  bottom:68rpx!important;
}

.fix-iphonex-button::after {
  content: ' ';
  position: fixed;
  bottom: 0!important;
  height: 68rpx!important;
  width: 100%;
  background: #fff;
}

至于为什么采用 68rpx，

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

小程序适配iphoneX,iphonex,小程序,兼容

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“微信小程序适配iphoneX的实现方法”

暂无评论...

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

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

对VUE中的对象添加属性

小程序兼容安卓和IOS数据处理问题及坑

评论“微信小程序适配iphoneX的实现方法”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接