android react native app旋转后页面混乱解决

现象

旋转之后页面会混乱

猜想一：rpx() hpx() 问题

怀疑每次旋转之后，因为调用了 rpx() hpx() 重新计算宽高，重新计算的值不对，导致页面乱了

解决方法：修改为全局只在刚开始算一次 px 的倍率，rpx hpx 只做在这个倍率上乘一个数

但是写死是多少 px 的元素，仍然会出现这个问题，还是会变大

猜想二：document.documentElement.clientWidth / clientHeight 没获取准

每次出现这个问题必定伴随着这两个值没一次获取准

但是无论中间值如何变化，最后一次获取的结果都是准的。每次获取一次值都会触发刷新，那么最后一次刷新的结果应该是回复正常才对

猜想三：混用 document.documentElement.clientWidth / clientHeight 和 window.screen.width / height

统一两者之后还是会出现这个问题

猜想四：页面整体进行了缩放

当页面出现放大的时候，监听 window.visualViewport.scale ，会发现它的值大于 1，使用 edge instpect 分析页面各个元素的 px 值其实是正常的，因此可以定位出是缩放的问题

尝试使用 document.body.style.zoom = ‘100%’;来每次手动缩放，但是没有用，输出 document.body.style.zoom 确实是 100%

说明缩放的在 body 还要往上一层，那就是 document 层，我能想到的方法是改 Viewport 这个元数据，给 scale 加一个最大值，

使用 js 实现就是 document.getElementsByTagName('meta')[1].content = 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1';

附：判断是组件刷新还是重新卸载挂载的方式

  const status = useRef(false);
  useEffect(() => {
    if (!status.current) {
      status.current = true;
      log.debug('remount');
    }
    log.debug('refresh');
  });