使用postcss-pxtorem实现h5网页适配，安卓浏览器横竖屏时根字体大小未变化？

Question

如题，h5横竖屏切换后安卓浏览器的根font-size无变化，导致页面布局有问题，ios则全部正常。
请问是什么原因导致？
postcss.config.js配置

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 根字体大小 37.5
      propList: ['*'],
      selectorBlackList: ['.norem']
    },
    autoprefixer: {}
  }
}

Answer 1

有些安卓浏览器并没有对横竖屏切换事件进行处理，而是直接沿用前一个方向的根 font-size 值。而 iOS 浏览器则会在横竖屏切换后重新计算根 font-size 值。可以监听横竖屏切换事件，并手动更新根 font-size 值：

window.addEventListener('orientationchange', function () {
  var deviceWidth = document.documentElement.clientWidth || window.innerWidth;
  // 根据屏幕宽度重新设置根字体大小，此处示例取值为 16 像素
  document.documentElement.style.fontSize = deviceWidth / 375 * 16 + 'px';
}, false);

用于需要根据设备宽度重新计算根 font-size 值的情况。
如果只是想固定根 font-size 值，则可以在 HTML 中加入 viewport 配置，例如：

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

Answer 2

postcss-mobile-forever

Answer 3

后面使用了window.onresize事件监听横竖屏尺寸变化，执行对应的事件解决了此问题