大屏可视化适配不同宽高比屏幕,保持网页宽高比不变的代码

ini 复制代码
const el=document.getElementById('app')
let width=1920
let height=1080
el.style.transformOrigin="top left"
function init(){
    const scaleX=innerWidth/width
    const scaleY=innerHeight/height
    const scale=Math.min(scaleX,scaleY)
    const left=(innerWidth-width*scale)/2
    const top=(innerHeight-height*scale) /2

    el.style.transform=`translate(${left}px,${top}px) scale(${scale})`
}
init()
addEventListener('resize',()=>{
    init()
})
相关推荐
哀木7 分钟前
诶,这么好用的 mock 你怎么不早说
前端
Lear22 分钟前
UniApp PDF文件下载与预览功能完整实现指南
前端
Heo25 分钟前
关于XSS和CSRF,面试官更喜欢这样的回答!
前端·javascript·面试
7***A4431 小时前
Vue自然语言处理应用
前端·vue.js·自然语言处理
高阳言编程1 小时前
vue2 + node + express + MySQL 5.7 的购物系统
前端
y***54881 小时前
React依赖
前端·react.js·前端框架
2***B4491 小时前
React测试
前端·react.js·前端框架
5***o5001 小时前
React自动化测试
前端·react.js·前端框架
T***u3331 小时前
React部署
前端·react.js·前端框架
Jing_Rainbow2 小时前
【AI-7 全栈-2 /Lesson16(2025-11-01)】构建一个基于 AIGC 的 Logo 生成 Bot:从前端到后端的完整技术指南 🎨
前端·人工智能·后端