IPhone X 移动端 兼容性问题

Iphone x 的刘海给屏幕增加了34pt的安全距离，就会导致我的页面布局错位。底部的tabbar 会被刘海挡住。

以下是专门针对vue 解决tabbar 被挡住的解决办法

1. 给index.html 页面添加 meta 属性

// 避免浏览器使用IE的兼容模式

<meta http-equiv="X-UA-Compatible" content="IE=edge">   

// 苹果手机全屏 显示  非常重要

<meta name="apple-touch-fullscreen" content="yes">

// 页面的是否可以缩放

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

2. 用storage 存储手机的类型  在util 下定义一个 storage.js 文件

/**

* 用于读取和存储localstorage

*

* @class LocalStorage

*/

class LocalStorage {

constructor (prefix = '__crm__', expired = null) {

// 存储前缀

this.prefix = prefix

// 过期时间 如果为零则永久

this.expired = expired