关于把竖向单个布局在鸿蒙等折叠手机屏中显示成双向布局

简单描述下需求场景：

　　本来开发的页面在大部分手机里，都是竖向下来展开的，但现在市场上折叠手机越来越多，那么当用户翻转折叠手机，宽度变长了，原本我们的开发页面就会被拉大，显得不好看，所以需要前端针对折叠屏进行兼容，在没打开的时候正常显示，翻转打开的时候就把页面上的div结合百分比和flex布局展开成两列。改善体验。

没做兼容之前的折叠屏效果如下：

做了兼容后，同样的屏幕大小打开效果如下：

1. 首先更改全局rem的计算方式，按照vue和react项目，都是放在index.html的js中，项目进入加载逻辑。

以前正常手机都是1，但折叠屏情况下，要按0.5算，小一半屏幕

function resize() {
    !function (e) {
      function t(a) {
        if (i[a])
          return i[a].exports;
        var n = i[a] = {
          exports: {},
          id: a,
          loaded: !1
        };
        return e[a].call(n.exports, n, n.exports, t),
          n.loaded = !0,
          n.exports
      }
 
      var i = {};
      return t.m = e,
        t.c = i,
        t.p = "",
        t(0)
    }([function (e, t) {
      "use strict";
      Object.defineProperty(t, "__esModule", {
        value: !0
      });
      var i = window;
      var benchmarkWidth = 750;
      t["default"] = i.flex = function (e, t) {
        var a = e || 100
          , n = t || 1
          , r = i.document
          , o = navigator.userAgent
          , d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i)
          , l = o.match(/U3\/((\d+|\.){5,})/i)
          , c = l && parseInt(l[1].split(".").join(""), 10) >= 80
          , p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi)
          , s = i.devicePixelRatio || 1;
        p || d && d[1] > 534 || c || (s = 1);
        var u = 1 / s
          , m = r.querySelector('meta[name="viewport"]');
        m || (m = r.createElement("meta"),
          m.setAttribute("name", "viewport"),
          r.head.appendChild(m));
        m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u);
        var offsetWidth = i.document.documentElement.offsetWidth;
        let percentage = 1
        // 宽屏、折叠屏缩小页面比例
        try {
          const scale = window.innerWidth / window.innerHeight
          if (scale >= 0.9) {
            percentage = 0.5
          }
        } catch { }
        r.documentElement.style.fontSize = offsetWidth / benchmarkWidth * e * percentage + "px";
        window.screenfontSize = offsetWidth / benchmarkWidth * e * percentage
      }
        ,
        e.exports = t["default"]
    }
    ]);
    flex(100, 1);
  }

　　同时要在页面中做监听

resize()
 var pageWidth = window.innerWidth
 var t = null
 var fn = 'orientationchange' in window ? 'orientationchange' : 'resize';
 window.addEventListener(fn, function () {
   clearTimeout(t)
   t = setTimeout(function () {
     var newPageWidth = window.innerWidth
     if (pageWidth !== newPageWidth) {
       pageWidth = newPageWidth
       resize()
     }
   }, 300)
 }, false);

　2. 在对应要做兼容的页面中，进入页面同样执行 window.innerWidth / window.innerHeight 算出当前屏幕对应比例值，这里以react为例子，vue转换下写法一样的

import React, { useState, useEffect } from 'react';
 
function MyComponent() {
  const [hmScale, setHmScale] = useState(window.innerWidth / window.innerHeight); // 比例值
 
    // 兼容折叠屏等系列获取scale
  const getWidthScreen = () => {
    // 监听开始初始化最新值
    setHmScale(window.innerWidth / window.innerHeight)
    // 二次预防措施
    let t = null
    let pageWidth = window.innerWidth
    clearTimeout(t)
    t = setTimeout(function () {
      let newPageWidth = window.innerWidth
      if (pageWidth !== newPageWidth) {
        pageWidth = newPageWidth
        setHmScale(window.innerWidth / window.innerHeight)
      }
    }, 300)
  }
 
  useEffect(() => {
    window.addEventListener('resize', getWidthScreen)
    return () => { // 卸载时移除监听
      window.removeEventListener('resize', getWidthScreen)
    }
  }, [])
 
  return (
    <div>
         <div className={`detail-page ${hmScale >= 0.9 ? 'width-screen' : ''}`}>
             <div>1 </div>
             <div>2 </div>
        </div>
    </div>
  );
}
 
export default MyComponent;

　3. 得出scale后更改原本布局下的div样式，用百分比计算减去对应外边距的rem，再用flx布局就可以完成响应式折叠屏兼容。css参考如下：

.detail-page {
  &.width-screen {
    display: flex;
    flex-wrap: wrap;
    & > div {
      width: calc((100% - .2rem) / 2);
 
      &:nth-child(even) {
        margin-left: .2rem;
      }
    }
  }
}