亲测实战大屏项目的适配方法

站长

2023年09月08日 06:01 · 阅读数 25

背景

想必在平常开发中，遇到要适配各种不同尺寸的屏幕、分辨率，甚至一套代码要兼容PC端到手机端对前端来说是比较头疼和麻烦的事情。如果要在时间很紧迫的情况下去一套代码，要在大屏、PC和移动端都可运行，且界面不乱，也不超出范围；确实挺头疼。我这里倒是有一个亲测且实践的一个特别简单的方法，不用换算，设计给多少px前端就写几px,照着UI设计无头脑的搬就可，而且在大屏、电脑pc端、手机移动端，一套代码，就可运行，保证界面不乱，不超出屏幕范围。这个方法是在我第一次写大屏项目时，用上的，当时时间也是很紧迫，但是项目上线后，对甲方来说很完美无缺了，一次过。最后发现它在手机端也能看。如果好奇想知道究竟是什么方法可以这么的丝滑去兼容大屏乃至任何尺寸任何分辨率的设备的小伙伴们，不妨接着往下看。

常见兼容各尺寸的方法

css媒体查询

@media screen。 eg:

@media screen and (max-width: 1700px){
 //屏幕尺寸小于1700的样式
}

这种方式，太麻烦，如果要求高，就要分的越细，几乎每个尺寸都要兼顾，写进去，实在实在是太太麻烦了。

viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

网页头部加入这段代码，网页宽度自动适应屏幕的宽度。这种方式大屏中不太适合，这种更加适合移动端。亲测，大屏不太适合。

rem

要换算，而且每次要根据屏幕尺寸的变化而去重新给一个新的根节点字体大小值。还是麻烦，嗯，也是不能完美适合大屏。

vw和vh

把整个屏幕宽高分成一百分，一个vw就是1%的宽，一个vh就是1%100的高。也是麻烦，而且也不能完美适配大屏。

百分百%

同vw,vh一样也不能完美适配大屏。

重点来了

最终我用了缩放，完美解决了大屏适配问题。它不仅可以在任何尺寸任何分辨率下，去相对完美的展示，在PC甚至移动端也是可以看的。

如何？

jsx页面里：

 useEffect(() => {
    //全屏模式
    fullScreens();
    //首次加载应用，设置一次
    setScale();
    //调试比例
    window.addEventListener('resize', Listen(setScale, 100));
  }, []);
 //调试比例
  // 监听手机窗口变化，重新设置
  function Listen(fn, t) {
    const delay = t || 100;
    let timer;
    return function () {
      const args = arguments;
      if (timer) {
        clearTimeout(timer);
      }
      const context = this;
      timer = setTimeout(() => {
        timer = null;
        fn.apply(context, args);
      }, delay);
    };
  }

  // 获取放大缩小比例
  function getScale() {
    const w = window.innerWidth / 1920;
    const h = window.innerHeight / 1080;
    return w < h ? w : h;
  }

  // 设置比例
  function setScale() {
    const bigMainDom = document.getElementById('bigMain');
    bigMainDom && (bigMainDom.style.transform = 'scale(' + getScale() + ') translate(-50%, -50%)');
  }

css:

 width:1920px;
 height:1080px;
 transform-origin: 0 0;
 position: absolute;
 left: 50%;
 top: 50%;

想要哪个页面去做这种兼容，就可在哪个页面去这样设置；利用查找id的方式找到对应的页面元素（这里只要能查找到元素就行，怎么写随自己），然后给对应的元素添加样式 transform ,去设置比例； getScale方法里面：先求一下宽高的比例，因为设计稿一般使用的分辨率是1920和1080，所以这里使用这个取比例；最后返回比例的时候，取比例比较小的，这样可以保证都显示出来；只不过相对小的尺寸会出现空白，大的尺寸那个占满全屏； js这里的translate(-50%, -50%) 和css里面的position: absolute; left:50%;top: 50%;transform-origin:0 0可保证画面在最中间，

注意点：transform-origin:0 0这个很重要哦，用来设置动画的基点，没有这个，怎么都不会居中正常显示的哦。

否则就会出现以下这几个情况：

亲测实战大屏项目的适配方法

而：

// 设置比例
  function setScale() {
    const bigMainDom = document.getElementById('bigMain');
    bigMainDom && (bigMainDom.style.transform = 'scale(' + getScale() + ') translate(0, 0)');
  }

则会：

亲测实战大屏项目的适配方法 Listen方式，是专门设备窗口大小变化时，就会自动调用setScale方法，我设置的是每100秒监听一次，相当于做了一个自适应的处理； setScale在页面加载时调用了一次，然后也加了一个resize方法；宽度、长度也设置一样，我写的是1920 * 1080

出现问题，两边有空白？

屏幕没有铺满，左右有空白，这是因为设备上面有地址栏，而导致的；因为地址栏占了一定的高度，但是设计稿把这块高度没有算进去，因此，实际的整体高度会比设计稿的大，而宽度是一样的，为了能够全部展示，就以大的为主，因此，宽度相对比就会出现空白啦；亲测实战大屏项目的适配方法

解决

设置成全屏就好啦；

亲测实战大屏项目的适配方法完美；因为我的笔记本电脑分辨率高，所以，电脑默认缩放设置的是125%，而不是100%，默认设置为100%整体字体什么都都会变小，观看都不高，所以电脑默认设置为125%啦，无论电脑默认是多少百分比，只要设置成全屏，都是全部铺满的。

亲测实战大屏项目的适配方法

设置全屏的代码

进入全屏、退出全屏、当前是否全屏模式的代码： commonMethod.js:

//进入全屏
  static fullScreen = (element) => {
    if (window.ActiveXObject) {
      var WsShell = new ActiveXObject('WScript.Shell');
      WsShell.SendKeys('{F11}');
    }
    //HTML W3C 提议
    else if (element.requestFullScreen) {
      element.requestFullScreen();
    }
    //IE11
    else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
    // Webkit (works in Safari5.1 and Chrome 15)
    else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
      // setTimeout(()=>{
      //   console.log(isFullScreen());
      // },100)
    }
    // Firefox (works in nightly)
    else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    }
  };
  //退出全屏
  static fullExit = () => {
    //IE ActiveXObject
    if (window.ActiveXObject) {
      var WsShell = new ActiveXObject('WScript.Shell');
      WsShell.SendKeys('{F11}');
    }
    //HTML5 W3C 提议
    else if (element.requestFullScreen) {
      document.exitFullscreen();
    }
    //IE 11
    else if (element.msRequestFullscreen) {
      document.msExitFullscreen();
    }
    // Webkit (works in Safari5.1 and Chrome 15)
    else if (element.webkitRequestFullScreen) {
      document.webkitCancelFullScreen();
    }
    // Firefox (works in nightly)
    else if (element.mozRequestFullScreen) {
      document.mozCancelFullScreen();
    }
  };
  //当前是否全屏模式
  static isFullScreen = () =>{
    return document.fullScreen ||
    document.mozFullScreen ||
    document.webkitIsFullScreen ||
    document.msFullscreenElement;
  }

这是react项目页面里引用的封装好的方法：

 //全屏
  const fullScreens = () => {
    if (!CommonMethod.isFullScreen()) {
      Modal.info({
        content: '开启全屏模式,体验更佳',
        okText: '确定',
        maskClosable: true,
        mask: false,
        // centered:true,
        width: '200px',
        height: '100px',
        className: 'fullScreenModal',
        onOk() {
          CommonMethod.fullScreen(document.getElementsByTagName('html')[0]);
        },
        onCancel() {
          CommonMethod.fullScreen(document.getElementsByTagName('html')[0]);
        },
      });
    }
  };

然后大屏页面第一次加载时，调用一次全屏模式方法即可，fullScreens：

useEffect(() => {
    //全屏模式
    fullScreens();
}

注意点

如果在使用transform，缩放的地方，就不能使用其他定位，你会发现使用其他定位（绝对定位、相对定位、固定定位等）会失效；使用antd里的模态框，就会失效哦。

完结

设置缩放的方法可以试试，并且在不同设备尺寸和分辨率下，大屏、pc、手机端都可以试一波。回头我把自己上面那个项目在不同设备下运行的截图整理一下，补发出来。对移动端有点要求的其实还会需要重新写一套代码的，我上面这种方式移动端只是样式没有乱也没有超出屏幕而已，毕竟这个只是专门给大屏做的代码，那么大的尺寸怎么的在手机端看也不会很符合的。