当前位置：首页 > news >正文

大屏/门户页面兼容各种分辨率或电脑缩放

news 来源：原创 2025/5/1 7:32:59

需求要求: 需要支持缩放功能(缩放后页面各元素模块正常展示)、需要适配各种分辨率(初始加载不应出现横向滚动条)

选择的实现方案

利用 zoom 或者 transform 来缩放兼容页面样式，不动业务模块代码

    const isMobile = /iPhone|iPad|iPod|Android|Harmony/i.test(navigator.userAgent) // 手机端const canUseZoom = !isMobile && !/Firefox|KaiOS|Opera/i.test(navigator.userAgent) // 能使用 zoom 的浏览器this.getScaleListener(canUseZoom)getScaleListener(canUseZoom) {const devicewidth = document.documentElement.clientWidthif (devicewidth === 1920) return // 根据设计稿实际强开来// 如果需要以高度为标准的话可以打开下面注释的// const deviceheight = document.documentElement.clientHeightconst scaleX = devicewidth / 1920// const scaleY = deviceheight / 919// const scale = Math.min(scaleX, scaleY)let scale = +scaleX.toFixed(4)document.body.style.setProperty(`--zoom`, scale)let myStyle = document.createElement('STYLE')myStyle.setAttribute('id', 'myScaleStyle')const minHeight = 100 / scalelet styleTextNode = document.createTextNode(`#app {width: 1920px;margin: 0 auto;box-sizing: border-box;${canUseZoom ? `zoom: var(--zoom)` : `position: absolute;left: 50%;transform: scale(var(--zoom)) translateX(-50%);transform-origin: 0 0;`}}${canUseZoom ? `.el-tooltip__popper, .el-popper {zoom: var(--zoom);}` : `.el-tooltip__popper, .el-popper {transform: scale(var(--zoom));}`}#app {min-height: ${minHeight}vh;}`)myStyle.appendChild(styleTextNode)document.head.appendChild(myStyle)},