react-media-saisai/src/components/Custom/index.js

兼容TS和JS的一个自适应浏览器缩放的插件

import React, { useState,useEffect } from 'react'
import './index.css';

const TableComponent = (props) => {
  const [zoom, setZoom] = useState(1);

  const calculateZoom = () => {
      const explorer = window.navigator.userAgent;
      if (explorer.indexOf("Firefox") >= 0) {
          console.log("火狐浏览器处理")
      } else if (explorer.indexOf("Chrome") >= 0 || explorer.indexOf("Safari") >= 0) { // 谷歌、苹果浏览器
          if (document.body.clientWidth < 1536) {
              setZoom(document.body.clientWidth / 1536)
          } else if (document.body.clientWidth >= 2100) {
              setZoom(document.body.clientWidth / 2100)
          } else {
              setZoom(1)
          }
      }
  }

  useEffect(() => {
    
      calculateZoom()
      window.onresize = () => {
          calculateZoom()
      }
  }, [])
  return (
    <div className='custom-adapter' style={{ zoom: zoom }}>
        {
            props.children
        }
    </div>
  );
};

export default TableComponent;