react 设置浏览器缩放比例

下拉框切换值时，页面内容根据像素比缩放

第一版：

1. 缩放比例代码实现：

export default function GetScreen() {

  const [windowScreen, setWindowScreen] = useState({
    width: window.screen.width,
    height: window.screen.height
  });

  // 加载页面时，从localStorary中获取缩放比例
   const _screen = localStorary.getItem('screen' || '2')

  // 监听
  useEffect(()=> {
      getWindowScreen(_screen);
  }, []);

  // 方法
  const getWindowScreen = (option) => {
    const { width: screenWidth, height: screenHeight } = window.screen
    setWindowScreen({ width: screenWidth, height: screenHeight })
    document.getElementsByTagName('body')[0].style.zoom = String(option / 
      window.devicePixelRatio
    );
    localStorary.setItem('screen', option)
  }

  // 存储下拉框数据
  const options = [
    {label: '100%', value: '1'}, 
    {label: '90%', value: '0.9'},
    {label: '80%', value: '0.8'}
  ];

  return(
    <Select 
      options={options} 
      defaultValue={ _screen || '1'}                 
      onChange{getWindowScreen}
    >
  )
}

2.  window.devicePixelRatio的值为1或者2，优化代码：

export default function GetScreen() {

  // 加载页面时，从localStorary中获取缩放比例
   const _screen = localStorary.getItem('screen' || '1')

  // 监听
  useEffect(()=> {
      getWindowScreen(_screen);
  }, []);

  // 方法
  const getWindowScreen = (option) => {
    // document.getElementsByTagName('body')[0].style.zoom = String(option / 
    //  window.devicePixelRatio);
    // window.devicePixelRatio的值不固定，有可能为1，也有可能为2，所以这里不能除        
    // window.devicePixelRatio
    document.getElementsByTagName('body')[0].style.zoom = String(option);
    localStorary.setItem('screen', option)
  }

  // 存储下拉框数据
  const options = [
    {label: '100%', value: '1'}, 
    {label: '90%', value: '0.9'},
    {label: '80%', value: '0.8'}
  ];

  return(
    <Select 
      options={options} 
      defaultValue={ _screen || '1'}                 
      onChange{getWindowScreen}
    >
  )
}

2.  不用Hooks

export default function GetScreen() {
  // 方法
  const getWindowScreen = (option) => {
    // 设置body元素的缩放比例
    document.getElementsByTagName('body')[0].style.zoom = String(option);

    // 将选中的值存储到localStorary中
    localStorary.setItem('screen', option);
  }

  // 加载页面时，从localStorary中获取缩放比例
  const _screen = localStorary.getItem('screen' || '1');
  document.getElementsByTagName('body')[0].style.zoom = String(_screen);

  // 存储下拉框数据
  const options = [
    {label: '100%', value: '1'}, 
    {label: '90%', value: '0.9'},
    {label: '80%', value: '0.8'}
  ];

  return(
    <Select 
      options={options} 
      defaultValue={ _screen ||  '1'}                 
      onChange{getWindowScreen}
    >
  )
}