微信小程序适配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 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 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 获取远程网页内容的函数
2009/09/08 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
Yii2单元测试用法示例
2016/11/12 PHP
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
数组越界问题
2015/10/21 面试题
教师实习的自我鉴定
2013/10/26 职场文书
C++程序员求职信范文
2014/04/14 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
父亲节活动策划方案
2014/08/24 职场文书
婚前保证书范文
2015/02/28 职场文书
房屋产权证明书
2015/06/19 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书