移动端常见兼容问题

1.iphone X 底部被遮挡问题

• 解决方式：在底部元素添加以下适配代码

body {height: 100vh;}
/* 你的贴底元素↓ */
.container {
  position: absolute;
  bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
  ...
}

• 解释
  viewport-fit
  iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：

contain: 可视窗口完全包含网页内容（左图）
cover：网页内容完全覆盖可视窗口（右图）
auto：默认值，跟 contain 表现一致

env

iOS11 新增特性，Webkit 的一个 CSS 函数，用于向 CSS 插入用户代理定义的变量设定安全区域与边界的距离，有四个预定义的变量：

safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离
env()必须配合 viewport-fit=cover 使用!

我们最常用的就是 safe-area-inset-bottom, 这个代表着不被小黑条遮挡的安全距离

2.调起键盘遮挡弹框

3.js将时间转换为时间戳在苹果手机上为NaN

  我们要转换的时间  
  	2017-08-12 23:00:00  格式（- 中划线）在ios上就会出现NaN
  解决方式：
  	new Date('2017-08-12 23:00:00'.replace(/-/g, '/')).getTime();
  	new Date('2017-08-12 23:00:00'.replace(/-/g, '/')).getMonth() + 1
  	new Date('2017-08-12 23:00:00'.replace(/-/g, '/')).getDate()

4.window.history.back()在ios中的localstorage问题

在返回前一个页面时，使用 history.back() 与 history.go(-1) 返回不会触发页面reload，
localstorage的状态在ios中不会刷新，建议使用window.location.href
另外，补充一个localStorage使用方法：
一般存储临时数据用，比如权限列表(如果ls中没有则去请求接口)