微信小程序适配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 相关文章推荐
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
小程序兼容安卓和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
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
numpy找出array中的最大值,最小值实例
2018/04/03 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
护理专业个人求职简历的自我评价
2013/10/13 职场文书
大三预备党员入党思想汇报
2014/01/08 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
好学生评语大全
2014/05/05 职场文书
材料物理专业求职信
2014/09/01 职场文书
效能风暴心得体会
2014/09/04 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
债务纠纷代理词
2015/05/25 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript