移动端网页开发填坑

Android

1. Android的物理返回键如果不做处理，会导致web页面上下级页面之间跳转混乱。
   解决方案：当下级页面跳转到上级页面时，使用location.replace(url)，这样不会保留下级页面的历史记录，物理返回键也就不会回退回来。

2. 如果页面包含position:absolue或fixed的元素，当虚拟键盘唤起时，整个页面UI会出现混乱，其中absolue比fixed产生的混乱还要诡异。这是因为Android虚拟键盘唤起时，页面的高度会重新计算而变小。
   解决方案：有虚拟键盘唤起的页面，不要使用absolute定位，使用fixed定位的元素的情况，可以监听window.onresize事件，当document.body.clientHeight变小时，把fixed定位的元素临时修改为static定位；document.body.clientHeight恢复时，再修改回来。

---

以上解决方案会有些问题，因为当手机横屏的时候也会触发window.onresize并且clientHeight也变小了，所以应该添加一个条件，即同时要判断clientWidth的值，如果clientWidth值变大了那就是手机横屏了，此时不需要做处理，但如果clientWidth没有变化，则按之前的方案修改fixed定位元素为static~
还有另外的几个解决方案，比如禁用手机横屏：

// 注意，这种方案的缺点是兼容性感人

或者用js监听手机横屏事件：

// 注意，这种方案仍然有兼容性问题
window.addEventListener("orientationchange", function() {
  switch(window.orientation) {
    case 90:
    case -90:
      // 此时为横屏
      break;
    default:
      // 否则为竖屏
      break;
  }
}, false);

3. 使用rem单位时，有些Android设备解析出的尺寸会变大，比如华为某款手机，html的font-size明明为36px，但是width为10rem的元素宽度竟然为414px。
   解决方案：在flexible.js之后，还要手写js获取body元素的offsetWidth，判断是否和预期一致，若不一致，则手动设置style.width使之达到预期效果。

iOS

1. input、select元素自带无法覆盖的样式。
   解决方案：-webkit-appearance:none;

2. new Date(string)有问题，不支持"2017-7-12"，支持"2017/7/12"，或者 new Date(2017,7,12,12,12,12) 这种格式。
   以下是我手写的一个转化函数

function createIOSDate(string) {
  let date = new Date(0);
  value = string.replace(/-|:|./g, " ").split(" ");
  date.setFullYear(value[0]);
  date.setMonth(value[1]-1);
  date.setDate(value[2]);
  date.setHours(value[3]);
  date.setMinutes(value[4]);
  date.setSeconds(value[5]);
  return date;
}

综合

1. 在zepto.js的某些版本，tap事件有bug，点击会触发两次回调函数。
   解决方案：将源码中的 touchend 修改为 touchEnd。

2. 网页常用meta标签

3. 手机端的chrome浏览器以及facebook app中的浏览器，都会有一个效果，当网页内容超过一屏时，会改变顶部地址栏的高度，时大时小或隐或现。这导致浏览器可视高度发生变化，在实现动态吸顶效果时候会被坑。
   解决方案：监听window的resize事件，根据window.innerHeight调整元素位置。

4. 在最新的 DOM 规范中，事件绑定函数的第三个参数变成了对象：

target.addEventListener(type, listener[, options]);

我们可以通过传递 {passive: true} 来明确告诉浏览器，事件处理程序不会调用 preventDefault 来阻止默认滑动行为，从而提高事件监听的性能。

5. 移动端canvas的width、height不支持rem单位。
   解决方案：使用js计算百分比尺寸，再为canvas赋值。