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


Posted in Javascript onSeptember 18, 2018

一、 安全区域(safe area)

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

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

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

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

核心内容应该处于 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,

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
JavaScript对象学习小结
Sep 02 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
实例详解Node.js 函数
Jun 10 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 #Javascript
解决vue attr取不到属性值的问题
Sep 18 #Javascript
vue动画打包后失效问题的解决方法
Sep 18 #Javascript
vue自定义全局共用函数详解
Sep 18 #Javascript
vue-自定义组件传值的实例讲解
Sep 18 #Javascript
vuex actions传递多参数的处理方法
Sep 18 #Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 #Javascript
You might like
初探PHP5
2006/10/09 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
Javascript 事件流和事件绑定
2009/07/16 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
python机器学习之KNN分类算法
2018/08/29 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
python psutil监控进程实例
2019/12/17 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
python能做哪方面的工作
2020/06/15 Python
Python用SSH连接到网络设备
2021/02/18 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
初中生三年学习生活的自我评价
2013/11/03 职场文书
网上商城创业计划书范文
2014/01/31 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
公司离职证明标准样本
2014/10/05 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫