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

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()
})
相关推荐
不会写DN3 分钟前
Protocol Buffers(.proto)实战入门:Go 生态最常用的接口定义语言
java·前端·golang
小小小米粒8 分钟前
原生 JS:数据和视图「分离」,必须手动同步原生 JS 里,数据是数据,视图是视图,两者完全没关系
前端·javascript·vue.js
摸鱼仙人~11 分钟前
纯前端 Vue 实现共享预览链接方案
前端·javascript·vue.js
happymaker062611 分钟前
VueCli标准化工程中的组件通信操作
开发语言·前端·javascript
Yiyi_Coding13 分钟前
Proxy详解
java·前端·javascript
a11177615 分钟前
PreTeXt 开源推荐(应用demo)
前端·开源·html
摸鱼仙人~22 分钟前
前端开发中“共享预览链接”场景-企业级最简方案:Vue + 极简后端(2 接口 1 张表)
前端·javascript·vue.js
七夜zippoe32 分钟前
应用安全实践(一):常见Web漏洞(OWASP Top 10)与防护
java·前端·网络·安全·owasp
reasonsummer35 分钟前
【白板类-03-01】20260402画板01(html+希沃白板)
前端·html