前端大屏16:9显示32:9技术方案

UI是按照3840*1080进行设计的 要全部正常显示在16:9的电脑上 就会这样

肯定是显示不完的 毕竟是按照3840设计的

所以我这边用动态的scale的方式进行处理

        <div class="map-container" id="mapContainer" :style="{ transform: `scale(${Scale})`, overflow: 'hidden' }">
           <!-- 这里给地图反向还原 不然会导致指针偏移 -->
            <el-amap :style="{ transform: `scale(${1 / Scale})` }"  ref="map" :center="center" :zoom="zoom"> </el-amap>
        </div>

然后在data里面定义好数据以及计算属性

    mounted() {
        window.addEventListener('resize', (e) => {
            let _clientWidth = document.documentElement.clientWidth
            let _clientHeight = document.documentElement.clientHeight
            this.clientWidth = Number(_clientWidth)
            this.clientHeight = Number(_clientHeight)
        })
    },    
    data() {
        return {
            width: 3840,//这里是ui设计的实际尺寸
            height: 1080,//这里是ui设计的实际尺寸
            clientWidth: document.documentElement.clientWidth,
            clientHeight: document.documentElement.clientHeight,
        }
    },
    computed: {
        Scale() {
            if (!this.clientWidth) return 1
            const scaleX = this.fixedMunber(this.clientWidth / this.width)
            let scale = scaleX
            return scale
        },
    },
    methods:{
        fixedMunber(num) {
            const fixedNum = 100000
            return parseInt(`${num * fixedNum}`) / fixedNum
        },
    }
<style lang="scss" scoped>
    .map-container {
        width: 3840px;//这里是ui设计的实际尺寸
        height: 1080px;//这里是ui设计的实际尺寸
        flex: none;
        position: relative;
    }
</style>

这样就可以正常适配屏幕拉 

但是高德地图会因为scale还原会变大 目前没找到合适的解决方案 -  -