微信小程序适配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 相关文章推荐
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
jquery foreach使用示例
Sep 12 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 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
用PHP连接Oracle数据库
2006/10/09 PHP
PHP 文件扩展名 获取函数
2009/06/03 PHP
PHP对字符串的递增运算分析
2010/08/08 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
实现JavaScript中继承的三种方式
2009/10/16 Javascript
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
js面向对象的写法
2016/02/19 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
layui select动态添加option的实例
2018/03/07 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
layui中的switch开关实现方法
2019/09/03 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
python实现周期方波信号频谱图
2018/07/21 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
童装店创业计划书
2014/01/09 职场文书
房地产融资计划书
2014/01/10 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
导游词之韩国济州岛
2019/10/28 职场文书