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

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()
})
相关推荐
沙漠几秒前
React Native-SyncFormatEdittext:用 JSI 实现零闪烁的实时文本格式化
前端·react native
超人气王几秒前
JavaScript新手基础入门——this指针指向,一文带你搞清楚
前端·javascript
码上有光8 分钟前
c++模板进阶知识讲解(对模板的进一步的运用与理解)
java·前端·c++·特化·模板进阶·偏特化
嘟嘟07179 分钟前
Python切片技巧×DeepSeek API:手把手教你打造智能商品文案生成器
前端·javascript
环境工程笔记11 分钟前
给 Agent 浏览器任务加一个 Verification Gate:遇到验证页时该如何优雅暂停
前端
一步一个脚印一个坑14 分钟前
页面性能监控中”资源加载”指标的深度解析:为什么静态资源加载时间和页面资源加载时间对不上?
前端
是你的小橘呀16 分钟前
模型总说瞎话?RAG 技术帮你用私域数据精准 “校准” 大模型
前端
是你的小橘呀19 分钟前
同样是处理并发请求,为什么别人的页面丝滑不卡顿?
前端
云水一下21 分钟前
HTML5 从入门到精通:不止于标签——HTML5 高级特性,小交互无需 JavaScript
前端·html5
来自上海的这位朋友21 分钟前
Spring Boot + MySQL 搭一个多人游戏后端:登录、房间、匹配、对局和成长系统
前端·后端·three.js