rem 适配问题

Question

为什么pc调试和在手机端看效果差这么多:
库: Vue, Webpack
浏览器: Chrome
布局: absolute
PC效果:

htc QQ 里面打开:

这是我的适配代码:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">

(function(win) {
    var doc = win.document,
      html = doc.documentElement,
      baseWidth = 720,
      rem = baseWidth / 100,
      resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
      recalc = function() {
        var clientWidth = html.clientWidth || 320;
        // if( clientWidth > 750 ){ clientWidth = 750 };
        html.style.fontSize = clientWidth / rem + 'px';
      };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', function() {
      setTimeout(recalc)
    }, false);
  })(window);

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0"> 去掉这个看看

Answer 2

我一般采用百分比布局。REM这种东西有时候还是不靠谱，计算也麻烦。

Answer 3

你把计算到的font-size alert出来看看就知道了。

具体看参考淘宝的方案使用Flexible实现手淘H5页面的终端适配

Answer 4

https://github.com/amfe/lib-f... 这是一个适配方案，亲身经历，相当好用 github上搜索这个项目lib-flexible

Answer 5

建议看看这篇文章，对你帮助会很大：使用Flexible实现手淘H5页面的终端适配