iphone 滚动不了

问题：iOS Safari浏览器上overflow: scroll元素无法滑动bug，在 电脑可以滚动

解决办法：使用 -webkit-overflow-scrolling 属性，该属性会让 overflow：scroll 的元素拥有像iOS原生一样顺滑的滑动效果。为了实现此目标，safari将所有overflow：scroll的元素用原生创建一个ScrollView，当-webkit-overflow-scrolling属性为touch时，启用硬件加速，出现顺滑效果。

-webkit-overflow-scrolling: touch;

在IOS input 输入框问题

input框去阴影

input, textarea {
  -webkit-appearance:none;
}

input输入框光标会变得巨大

不要给input加高度，加padding撑开

页面滑动，但是光标在原地不动，不随input框移动：

既然光标不动，那就干脆让它消失好了。监听页面移动事件，使所有input失去焦点

//添加监听事件，据说放在created里面也ok，不过我没试过，感兴趣的可以试试
 mounted() {
    window.addEventListener("touchmove", this.myTouchMove);
  }
 
myTouchMove() {
  if (document.hasFocus) {
    var inputList = document.getElementsByTagName("input"); // 获取input
    for (var i = 0; i < inputList.length; i++) {
      inputList[i].blur(); // input失焦
    }
  }
}

在IOS中 li 按下会有阴影效果

-webkit-tap-highlight-color: transparent;

ios 双击页面缩放 禁止

iOS10后Safari不再识别这个meta标签。所以得用js来hack一下：

禁用双指缩放：

document.documentElement.addEventListener('touchstart', function (event) {
  if (event.touches.length > 1) {
    event.preventDefault();
  }
}, false);

禁用手指双击缩放：

var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
  var now = Date.now();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

解析有效日期

在苹果系统上解析YYYY-MM-DD HH:mm:ss这种日期格式会报错Invalid Date，但在安卓系统上解析这种日期格式完全无问题。

new Date("2019-03-31 21:30:00"); // Invalid Date

查看Safari相关开发手册发现可用YYYY/MM/DD HH:mm:ss这种日期格式，简单概括就是年月日必须使用/衔接而不能使用-衔接。当然安卓系统也支持该格式，然而接口返回字段的日期格式通常是YYYY-MM-DD HH:mm:ss，那么需替换其中的-为/。

const date = "2019-03-31 21:30:00";
new Date(date.replace(/\-/g, "/"));

背景和内容分离

由于ios的橡皮筋效果，可滚动DOM结构会出现自动回弹，这种原本为了页面更加丝滑的效果，也导致了页面webview 本身和页面内可滚动内容，在下拉时出现分层，可以看到顶部或底部的空白内容。

 处理方法：

 1> 给页面内可滚动内容设置定位属性；
 2> 在可滚动容器的下层设置有定位属性的遮罩，遮盖住webview本身的空白。