移动端兼容问题汇总

在移动端可以使用touch事件代替click事件，因为click事件有着明显的延迟

ios手机input框点击获取焦点不敏感

FastClick ：解决移动端点击屏幕大约延迟300毫秒后才会触发点击事件

如果页面上有一些特定的元素不需要使用fastclick来立刻触发点击事件，可以在元素的class上添加needsclick：

<a class="needsclick">Ignored by FastClick</a>

FastClick原理：FastClick的精髓是取消原生点击事件并立马模拟一个点击事件来取消这300ms的延迟：

FastClick.prototype.focus = function(targetElement) {
        var length;
        if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
            length = targetElement.value.length;
            targetElement.setSelectionRange(length, length);
        } else {
            targetElement.focus();
        }
};

原因：使用 FastClick 

解决办法：

1 在input框外层套一层div标签，给div标签添加点击事件，在点击事件中用js使input框获得焦点；

   对于点击调出弹框，弹框里有输入框的情况，可以弹框弹出的时候直接让里边的input框获得焦点；

2 

FastClick.prototype.focus = function(targetElement) {
        var length;

        // Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.
        if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
            length = targetElement.value.length;
            // 修复不弹出键盘，令其强制弹出键盘
            targetElement.focus()
            // ----------
            targetElement.setSelectionRange(length, length);
        } else {
            targetElement.focus();
        }
};

安卓字体偏上问题

原因：移动端开发，为了更好的适配，大家都会采用em或者rem来进行开发。在进行适配的换算时，编译器会将em或者rem自动换算成px来显示。这时就会出现问题，因为换算精度不足，换算成的px会出现小数点问题，如果出现小数点的话，系统会自动进行四舍五入的取整运算。取整之后就会出现居中的字体偏上问题了。

解决办法： 

1 使用scale（缩放），进行一次内容的缩小和放大，从而使得转换的px相同。这时元素的宽高字体大小需要设置成原来的两倍大：

transform: scale(0.5);
font-size: 32px;  /* 实际是16像素*/

2 既然是因为转换出现小数点，那么display使用table-cell，进行取整。

一像素边框问题

解决办法：

(function (doc, win) {
  var docEl = win.document.documentElement;
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  var metaEl = doc.querySelector('meta[name="viewport"]');
  var dpr = 0;
  var scale = 0;

  // 对iOS设备进行dpr的判断，对于Android系列，始终认为其dpr为1
  if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/[iphone|ipad]/gi);
    var devicePixelRatio = win.devicePixelRatio;

    if(isIPhone) {
      dpr = devicePixelRatio;
    } else {
      drp = 1;
    }
    
    scale = 1 / dpr;
  }

  /**
    * ================================================
    *   设置data-dpr和viewport
    × ================================================
    */

  docEl.setAttribute('data-dpr', dpr);
  // 动态改写meta:viewport标签
  if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    document.documentElement.firstElementChild.appendChild(metaEl);
  } else {
    metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
  }

})(document, window);

 点击穿透问题

1 点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了关闭按钮下面元素的click事件；

2 点击页内按钮跳转至新页，然后发现新页面中对应位置元素的click事件被触发；

原因：

1 fastClick会导致事件穿透

2 touch和click混用（touch会立即触发，click有延迟）

解决办法：

1 页面点击都只用touch；

2 页面点击都只用click；