手机端开发的问题（摘要）

监听屏幕的变化就可以做到动态切换元素样式:

window.onresize = _.debounce(function() {

      var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;

      document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';

}, 50);

解决高保真标注与实际开发值比例问题

如果你们设计稿标准是iphone5，那么拿到设计稿的时候一定会发现，完全不能按照高保真上的标注来写css，而是将各个值取半，这是因为移动设备分辨率不一样。设计师们是在真实的iphone5机器上做的标注，而iphone5系列的分辨率是640，实际上我们在开发只需要按照320的标准来。为了节省时间，不至于每次都需要将标注取半，我们可以将整个网页缩放比例，模拟提高分辨率。这个做法很简单，为不同的设备设置不同的meta即可:

var scale = 1 / devicePixelRatio;

document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

(function() {

  // deicePixelRatio ：设备像素

  var scale = 1 / devicePixelRatio;

  //设置meta 压缩界面 模拟设备的高分辨率

  document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

  //debounce 为节流函数，自己实现。或者引入underscoure即可。

  var reSize = _.debounce(function() {

      var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;

      //按照640像素下字体为100px的标准来，得到一个字体缩放比例值 6.4

      document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';

  }, 50);

 

  window.onresize = reSize;

})();