Common solutions for mobile terminals

1、resize monitor

var resizeTimer = null;

$(window).resize(function(){
    
    if(resizeTimer){
    
        clearTimeout(resizeTimer);
    }
    resizeTimer = setTimeout(function(){
    
        console.log(" Window changes ")
    },100)
})

2、ResizeObserver

Listen for changes in element width

    const objResizeObserver = new ResizeObserver(entries => {
    
      const entry = entries[0];
      // dom attribute 
      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);
    });

Monitor different devices

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

Monitor horizontal and vertical screen switching

window.addEventListener('orientationchange', onOrientation);

Handle root font size changes

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';
    };
  }, []);
};

Monitor the font size of the mobile phone

Set the root font size change to useEffect Inside
Can cause , Page initialization display , The root font has not been calculated yet
The problem that elements shrink first and then enlarge
At the head of the page

 for example react

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

 On mobile phone ,
 No compatible horizontal screen , Therefore, it is expected that the root font size of the horizontal screen and the vertical screen 
iPad not so bad 
  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);