移动端常用解决方案

1、resize监听

var resizeTimer = null;

$(window).resize(function(){
    
    if(resizeTimer){
    
        clearTimeout(resizeTimer);
    }
    resizeTimer = setTimeout(function(){
    
        console.log("窗口改变")
    },100)
})

2、ResizeObserver

监听元素宽度的变化

    const objResizeObserver = new ResizeObserver(entries => {
    
      const entry = entries[0];
      // dom属性
      const cr = entry.contentRect;
      setTimeout(() => {
    
        const distanceW = Math.abs(cr.width - oldScreen.width) > 100;
        load = cr.width === window.innerWidth;
        if (distanceW && load) {
    
          load = false;
          oldScreen.width = window.innerWidth;
          onOrientation();
        } else {
    
          onResizeRem();
        }
      }, 100);
    });

监听不同设备

  const ua = useUa();
  const isLark = /lark/i.test(ua);
  const isIpad = /ipad/i.test(ua);
  const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
	
	飞书上的ipad
	if (isLark && isIpad && isTouch) 

监听横竖屏切换

window.addEventListener('orientationchange', onOrientation);

处理根字体大小的变化

export const useRem = (): void => {
    
  // const [rem, setRem] = useState<number>(100);
  function setRem() {
    
    // setRem((window.innerWidth / 414) * 100);
    const fontSize = (window.innerWidth / 375) * 100;
    document.documentElement.style.fontSize = `${
    fontSize}px`;
  }

  useEffect(() => {
    
    setRem();
    window.addEventListener('resize', setRem);
    window.addEventListener('orientationchange', onOrientation);

    return () => {
    
      window.removeEventListener('resize', setRem);
      window.removeEventListener('orientationchange', onOrientation);
      document.documentElement.style.fontSize = '16px';
    };
  }, []);
};

监听手机端字体大小

设置根字体大小变化放在useEffect里面
会造成，页面初始化显示，根字体还没计算好
元素先缩然后放大的问题
放在页面的头部

例如react

 <Helmet>
    <script>{
    SCRIPT_CONTENT}</script>{
    ' '}
  </Helmet>

在手机上，
没有兼容横屏，所以期望横屏也用竖屏的根字体大小
iPad还好
  const ua = useUa();
  const isAnd = /android/i.test(ua);
  // const isIphone = /iphone/i.test(ua);
  const isIpad = /ipad/i.test(ua);
  const isIpadsafari = ua.includes('Safari') && !ua.includes('iPhone');
  const isMobile = isIpad || (isIpadsafari && !isAnd);
  const SCRIPT_CONTENT = `document.documentElement.style.fontSize = ${
    
    isMobile ? window.innerWidth : 375
  } / 375 * 100 + "px";`;

ua

const isMobile = /(ipad|iphone|ipod|windows phone|android)/i.test(navigator.userAgent);