移动端总结：

更新于 2016/11/3

• meta标签
• 使用click会出现绑定点击区域闪一下的情况
• 当前点击元素样式
• 消除transition闪屏
• iphone下给除body外的元素添加滚动条滚动效果
• 设备像素比(device pixel ratio )
• 移动端多屏兼容处理方案

meta标签

---

<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />

• 第一个meta标签表示文档的宽度为设备的宽度，强制缩放比例为1，且用户不可更改；
• 第二个meta标签表示允许全屏模式浏览（safari私有）；
• 第二个meta标签指定safari顶端状态条的样式（safari私有）；
• 第四个meta标签告诉设备忽略将页面中的数字识别为电话号码；

使用click会出现绑定点击区域闪一下的情况：

---

• 添加如下属性即可解决：

-webkit-tap-highlight-color: rgba(0,0,0,0);

当前点击元素样式：

---

-webkit-tap-highlight-color: 颜色

消除transition闪屏:

---

-webkit-transform-style: preserve-3d;
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden;
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/

iphone下给除body外的元素添加滚动条滚动效果：

---

body{
    -webkit-overflow-scrolling: touch;
}

设备像素比(device pixel ratio )：

---

这里以iphone6做为参考：

// 设备像素比：
dpr = window.devicePixelRatio;      // => 2

// 手机屏幕宽高（设备独立像素/逻辑像素）：
width = screen.width;            // => 375
height = screen.height;          // => 667
    
// 物理像素 = 设备独立像素 * 设备像素比               
750 = 375 * 2（ 在某一方向上，x方向或者y方向）

移动端多屏兼容处理方案：

1.移动端flexible.js多屏兼容处理：

---

/*eslint no-unused-vars: 0 */
(function(win, lib) {
  var doc = win.document
  var docEl = doc.documentElement
  var metaEl = doc.querySelector('meta[name="viewport"]')
  var flexibleEl = doc.querySelector('meta[name="flexible"]')
  var dpr = 0
  var scale = 0
  var tid
  var flexible = lib.flexible || (lib.flexible = {})

  if (metaEl) {
    console.warn('将根据已有的meta标签来设置缩放比例')
    var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/)
    if (match) {
      scale = parseFloat(match[1])
      dpr = parseInt(1 / scale)
    }
  } else if (flexibleEl) {
    var content = flexibleEl.getAttribute('content')
    if (content) {
      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)
      if (initialDpr) {
        dpr = parseFloat(initialDpr[1])
        scale = parseFloat((1 / dpr).toFixed(2))
      }
      if (maximumDpr) {
        dpr = parseFloat(maximumDpr[1])
        scale = parseFloat((1 / dpr).toFixed(2))
      }
    }
  }

  if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi)
    var isIPhone = win.navigator.appVersion.match(/iphone/gi)
    var isIPhone_9_3 = isIPhone && win.navigator.appVersion.match(/OS 9_3/)
    var devicePixelRatio = win.devicePixelRatio
    if (isIPhone && ! isIPhone_9_3) {
      // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
        dpr = 3
      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
        dpr = 2
      } else {
        dpr = 1
      }
    } else {
      // 其他设备下，仍旧使用1倍的方案
      dpr = 1
    }
    scale = 1 / dpr
  }

  docEl.setAttribute('data-dpr', dpr)
  if (!metaEl) {
    metaEl = doc.createElement('meta')
    metaEl.setAttribute('name', 'viewport')
    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')
    if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(metaEl)
    } else {
      var wrap = doc.createElement('div')
      wrap.appendChild(metaEl)
      doc.write(wrap.innerHTML)
    }
  }

  function refreshRem(){
    var width = docEl.getBoundingClientRect().width
    if (width / dpr > 540) {
      width = 540 * dpr
    }
    var rem = width / 10
    docEl.style.fontSize = rem + 'px'
    flexible.rem = win.rem = rem
  }

  win.addEventListener('resize', function() {
    clearTimeout(tid)
    tid = setTimeout(refreshRem, 300)
  }, false)
  win.addEventListener('pageshow', function(e) {
    if (e.persisted) {
      clearTimeout(tid)
      tid = setTimeout(refreshRem, 300)
    }
  }, false)

  if (doc.readyState === 'complete') {
    doc.body.style.fontSize = 12 * dpr + 'px'
  } else {
    doc.addEventListener('DOMContentLoaded', function(e) {
      doc.body.style.fontSize = 12 * dpr + 'px'
    }, false)
  }


  refreshRem()

  flexible.dpr = win.dpr = dpr
  flexible.refreshRem = refreshRem
  flexible.rem2px = function(d) {
    var val = parseFloat(d) * this.rem
    if (typeof d === 'string' && d.match(/rem$/)) {
      val += 'px'
    }
    return val
  }
  flexible.px2rem = function(d) {
    var val = parseFloat(d) / this.rem
    if (typeof d === 'string' && d.match(/px$/)) {
      val += 'rem'
    }
    return val
  }

})(window, window['lib'] || (window['lib'] = {}))

2.flex布局：

---

2016-04-19 微信官方发布消息，Android x5 内核 已升级到 Blink ，可以愉快地写 flex 了

这是一个很好的多屏解决方案，可惜pc端兼容不太好。

未完，待续...