移动端浏览器适配问题处理方案

• 跨平台功能实现，是web的优势，但是不同终端的不同分辨率对于前端开发者而言是一个不得不迈过去的坎。我在这两年的工作中大部分项目主要是制作webApp，所以在移动端适配这条路上也是不断的摸索。在此我分享一下我这两年的经验，如有错误，欢迎斧正。为了方便阅读，我将最新版放在开头。

目前使用版

利用rem进行适配，根据页面宽度，动态的更改根元素的字体大小

  // 全局字体生成
  function initPageSize () {
    // 创建变量，用来存储用户设备信息
    const userPhoneSize = {
      // 屏幕宽度
      width: window.innerWidth,
     // 屏幕高度
      height: window.innerHeight
    };
    // 为body增加transform属性，会使fixed的相对定位的对象变成body
    document.body.style['transform'] = 'translate(0px, 0px)';
    document.body.style['webkitTransform'] = 'translate(0px, 0px)';
    document.body.style['mozTransform'] = 'translate(0px, 0px)';
    document.body.style['msTransform'] = 'translate(0px, 0px)';
    document.body.style['oTransform'] = 'translate(0px, 0px)';
    // 判断宽高，处理body
    // 如果屏幕宽小于屏幕高，说明是移动端浏览器，我们只需要根据屏幕宽度更改根元素的字体大小就行了
    // 我们的设计稿宽度是750，而且我们开发时为了方便，将相对字号设置成了100，所以我这里写的是7.5
    if (userPhoneSize.width < userPhoneSize.height) return (document.documentElement.style['font-size'] = (userPhoneSize.width / 7.5) + 'px');
    // 在这里我们判断用户屏幕宽大于屏幕高，我们默认为PC端，根据我们公司的需求，只需要在PC端能显示成移动端的形式就行，所以我这里将body设置成竖向的。667是设计图高度，375是我设定的显示屏幕宽度
    document.documentElement.style['font-size'] = (userPhoneSize.height * 375 / 667 / 7.5) + 'px';
    document.body.style['width'] = userPhoneSize.height * 375 / 667 + 'px';
    // 进行居中处理
    document.body.style['margin'] = '0 auto';
    // 为了区分白底，加了一像素的边框
    document.body.style['border'] = '1px solid #ccc';
  }

在页面加载前执行这个函数，之后将所有设计图量得的尺寸除以100，得到的就是相对的rem尺寸。因为我们项目中使用的是vue全家桶，是利用webpack进行打包，所以我们在这一步使用了postcss里的一个小插件，post-px2rem用来将px转化为rem，这样我们在写页面的时候就可以所量即所写了

  require('postcss-px2rem')({
    // 这里就是设置的相对字号
    remUnit: 100
  })

但是这样会有一个问题，就是webkit内核的浏览器不能显示小于12号字体的文字的问题，我目前的解决方式是利用css3的变形处理

CSS3变形版

这里就比较暴躁了，当时写的时候是利用了css3的transfrom的scale属性，对页面进行了变形处理，不过因为在uc浏览器上部分元素的宽度显示有问题(textarea和部分p标签的宽度会莫名其妙的变窄)，就放弃了，当时处理方式是单独对变窄的标签进行反向的变形，即重新放大
这是当时的代码：

/* 这里先给body初始化属性，方便变形，这里的640是我们的实际图宽度 */
body {
  width: 640px;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
}

  function initPageSize () {
    //  获取屏幕宽高
    const widthBox = window.screen.width;
    const heightBox = window.screen.height;
    // 这里设置应该变形的比例，当时我们设计图的宽度是640，所以这里是以640的宽度作为被除数
    const slace = this.widthBox / 640;
    // 这里直接进行变形赋值，为了方便，这里使用了jquery
    $('body').css({
      'transform': 'scale(' + slace + ')',
      '-ms-transform': 'scale(' + slace + ')',
      '-moz-transform': 'scale(' + slace + ')',
      '-webkit-transform': 'scale(' + slace + ')',
      '-o-transform': 'scale(' + slace + ')',
      'height': this.heightBox / slace,
      'overflow-x': 'hidden',
      'overflow-y': 'auto'
    });
  }

这套写法是当年年轻气盛不懂事的时候写的，现在想想也是挺有想象力的