Web移动端实现自适应缩放界面的方法汇总

方案一： 设置tranform/scale
首先设置内容固定宽度、自动高度（以下举例）

  width: 375px;  height: auto;

通过获取窗口的宽度与固定宽度相除，获得缩放比例
const scaleValue=window.innerWidth / 375
在html层，添加一段script：

<script dangerouslySetInnerHTML={
   {
    __html: this.getScript() }}></script>

添加一段设置zoom值的函数：

 getScript() {
   
    return `
      const zoomValue=window.innerWidth / 375;
      document.documentElement.style.transform="scale("+zoomValue+")";
      document.documentElement.style.transformOrigin="left top";
     ;
  }

注：
以上也可以直接写script，我上面返回一段html是因为项目是通过服务端渲染的。
样式的设置必须在界面加载之前，否则会因界面显示变更出现闪现问题。
因为添加了服务端渲染，所以无法在界面一开始初始时，无法获取window、document等对象。而上面html的注入，对服务端渲染机制的一个黑科技~
上面的方案完成后，看看效果。然后坑出来了：
项目设置的absolue元素width 100%失效了 – 可以设置固定的宽度解决

弹框position=fixed位置飞到天边去了 – 这个无法规避。

网上找到了一篇文章 CSS3 transform对普通元素的N多渲染影响 ，介绍了transform的一堆坑。
我这个项目一些布局需要position=fixed，所以tranform不适合~放弃
这个坑的其它介绍可以参考下：
transform限制position:fixed的跟随效果

关于在transform下的子元素设置fixed无效的困惑

总结：
position:fixed不支持，所以想做标题栏置顶，上面方案是无法实现的。

ipad有遗留问题：微信浏览器，横竖屏切换时，有些机型在打开一瞬间，横向拖动有空白问题。这个问题无法处理~

以上方案因为使用了scale，同时窗口的宽高window.innerHeight无法准确获取，需要除以比例,比如: window.innerHeight / (window.innerWidth / 375)

方案二： 设置zoom
在上一个方案的基础上，尝试zoom缩放：

 getScript