记录快捷的实现特定大屏幕、拼接屏等尺寸特殊设备的适配开发工作。

大概描述一下我当时这个项目的需求：

1. 展示设备为一个宽高比为3：1的固定尺寸大屏，
2. 展示效果要清晰，当然保证和设计稿输出一致
3. 能够在相同比例的屏幕下铺满全屏展示。且字体大小结构尺寸比例展示协调
4. 这是我自己给自己提的一个需求，开发一定要方便，就像正常的开发一个页面一样，我不应该使用一些兼容的东西，比如媒体查询来适配等等。

首先我采用了严格按照设计图标注的尺寸，这是固定的像素尺寸，因为设计图按照客户的屏幕分辨率来设计的，但这样就造成了再开发中开发用的设备不足以完整的展示全部页面，因为页面尺寸远远大于屏幕的尺寸了。所以问我采用了css的transform: scale()等比缩放页面的方式，让开发设备能完整展示页面，这样一来也能良好的处理Echart的问题。

为了能再客户的屏幕上对于一些小的宽高差异也能正常处理，再项目页面初始化后获取了设备宽高，和当前页面的宽高，做了计算，以此来适配设备。

为了能方便的在开发阶段调试真实的设备展示效果我在项目中配置了从本地存储中获取设计图比例也就是前端页面的实际宽高的比例，具体实现代码如下：

    const qshWidthHeightRatio = Number(
      localStorage.getItem('qsh_width_height_ratio') ?? 3.3333,
    );
    const qsh_height = localStorage.getItem('qsh_height') ?? 3840;
    const qsh_width = localStorage.getItem('qsh_width');

    const _el = document.querySelector('.basic-container');

    if (qsh_width) {
      const width = Number(qsh_width);
      _el.style.height = `${width / qshWidthHeightRatio}px`;
      _el.style.width = `${width}px`;
    }

    if (qsh_height) {
      const height = Number(qsh_height);
      _el.style.height = `${height}px`;
      _el.style.width = `${height * qshWidthHeightRatio}px`;
    }

    document.querySelector('.topbar_bj').style.width = _el.style.width;

    setIsAdaptation(true);

    scaleContainer();
    
    // 注册窗口大小调整事件，动态调整页面比例
    window.onresize = () => {
      scaleContainer();
    };
    
    const scaleContainer = () => {
        const _el = document.querySelector('.basic-container');
        const { clientWidth, clientHeight } = _el;
        const { innerWidth, innerHeight } = window;

        let widthScale = innerWidth / clientWidth;
        let heightScale = innerHeight / clientHeight;

        let scale = widthScale;
        if (scale * clientHeight > innerHeight) {
          scale = heightScale;
        }

        window.scale = scale;
        _el.style.transform = `scale(${scale}) translate(-50%, -50%)`;
    };