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

一、 安全区域(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 ?'fix-iphonex-button':''}}">这是一个吸底按钮区域</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，

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

赞 (0)

相关推荐

  • 微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤

    本文介绍了微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤,分享给大家,具体如下: 微信小程序框架:mpvue ui框架:mpvue-weui request请求:fly.js 1.项目初始化 注:如果没有安装node环境的请先去网上下载node.js下来安装,安装后默认安装npm了 接下到你要建项目的目录下打开cmd窗口(快捷方法:打开到目录后按住键盘shift,然后点击鼠标右键选择在此处打开powershell窗口即可) npm默认从外网下载包,可能会比较慢,可以换

  • 详解微信小程序之一键复制到剪切板

    详解微信小程序之一键复制到剪切板

    最近在开发小程序项目里遇到一个小难题-----一键复制 在网页开发里 我们可以引用大牛封装好的复制插件,比如无flash插件clipboard.js适用移动端,pc端------- 言归正装,打开微信开发文档打开-APi即可查询到: 第一个是设置要复制的内容到剪切板,第二个是获取剪切板的内容,我们要用到的是第一个设置剪切板内容: 1. <text class="tblin_items_txt" selectable="true">{{detail.tao

  • 微信小程序中上传图片并进行压缩的实现代码

    小程序上传图片要先了解他其中的各个属性值,在https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html内有详细的介绍 今天在这里主要来讲下如何去上传图片并进行压缩,了解下以下属性值 先来看下页面展示(点击上传图片,从相册中选择,上传完图片后又点了一次上传) 来来来,上代码 wxml代码 <button bindtap='chooseImageTap'>上传图片</button> <button

  • 微信小程序实现即时通信聊天功能的实例代码

    项目背景:小程序中实现实时聊天功能 一.服务器域名配置 配置流程 配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-network.html 二.nginx中配置反向代理加密websocket(wss) upstream websocket{ hash $remote_addr consistent; server 127.0.0.1:9090 weight=5 max_fails=3 fail_timeout=30

  • 微信小程序实现的一键复制功能示例

    本文实例讲述了微信小程序实现的一键复制功能.分享给大家供大家参考,具体如下: 微信小程序不支持页面复制功能,故要实现某些信息的复制,需要开发复制功能 微信小程序中复制一般采用调用  wx.setClipboardData 接口 实现功能如下: 1,.wxml里写一个复制按钮 <button bindtap="copy"> 一键复制 </button> 2, .js里写复制功能 copy: function (e) { var that = this; wx.se

  • 微信小程序onLaunch异步,首页onLoad先执行?

    本来按照事件顺序,小程序初始化时触发App里的onLaunch,后面再执行页面Page里的onLoad,但是在onLaunch里请求获取是否有权限,等待返回值的时候Page里的onLoad事件就已经执行了. //app.js App({ onLaunch: function () { console.log('onLaunch'); wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { }, success: function(res) {

  • 微信小程序自定义底部弹出框

    微信小程序自定义底部弹出框

    本文实例为大家分享了微信小程序底部弹出框展示的具体代码,供大家参考,具体内容如下 效果图: html <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <view animation="{{animationData}}" class="commodity_attr

  • 微信小程序wx:for循环的实例详解

    列表渲染 wx:for 在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件. 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item. <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] } }) 使

  • 微信小程序自定义组件封装及父子间组件传值的方法

    首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名 官网地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 例如,我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml <view hidden="{{response.length < 1}}"> <view class

  • 微信小程序input框中加入小图标的实现方法

    最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: emmmm 好像小程序的background-image属性并不给力啊,然后查阅相关资料后,放弃了background-image属性. 然后另辟蹊径,由于小程序中,好像只有image标签才能加载本地图片,所以考虑使用image标签来实现,大致思路就是在一个view中,左边是image,右边是in

随机推荐