postcss-pxtorem 超大屏变形？

Question

需要适配3840*2160的屏幕，设计稿是1920 x 1080的，我使用的是postcss-pxtorem，"rootValue": 192,，在1920屏幕以下都是正常并且可响应式缩放的，但是在3840 x 2160就出现了页面变形，只能显示一半内容的情况，代码如下：

// 设计稿以1920px为宽度
function setRem() {
  // 实际设备页面宽度和设计稿的比值
  const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
  const htmlHeight = document.documentElement.clientHeight || document.body.clientHeight;
  const designRatio = 1920 / 1080;
  const realRatio = htmlWidth / htmlHeight;

  let baseSize = 192;
  let scale = htmlWidth / 1920;
  document.documentElement.style.fontSize = (baseSize * scale) + 'px';

  // 存在宽度够了，高度不够的情况
  if (realRatio > designRatio) {
    document.documentElement.style.fontSize = (baseSize * scale) * (designRatio / realRatio) + 'px'
  }
}

setRem();

window.addEventListener('resize', () => {
  setRem();
});

.postcssrc.js 配置：

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-pxtorem": {
      "rootValue": 192,
      "propList": ["*"],
      "selectorBlackList": ["weui-"]
    }
  }
}

求大神指教，不胜感激！

Answer 1

已解决，并不是rem的问题，而是安卓5.0系统不能使用display:flex;