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

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()
})
相关推荐
hlvy几秒前
Claude Code 太难看?我开源了一个 Web GUI
前端·ai·claude
颜酱2 分钟前
提示词强化 3:JSON 与「流式」——前后端原理、BFF、以及两个示例页
前端·javascript·人工智能
蜡台2 分钟前
VUE node EPERM: operation not permitted, unlink 错误
前端·javascript·vue.js
Wect11 分钟前
深度解析前端性能优化
前端·面试·性能优化
|晴 天|11 分钟前
AI智能助手功能实现
前端·vue.js·人工智能
历程里程碑24 分钟前
55 Linux epoll高效IO实战指南
java·linux·服务器·开发语言·前端·javascript·c++
Mapmost26 分钟前
【Mapmost 渲染指北】利用LUT快速构建场景色调
前端
踩着两条虫26 分钟前
VTJ:核心概念
前端·低代码·ai编程
Moment28 分钟前
作为前端,如果使用 Langgraph 实现第一个 Agent
前端·javascript·后端
相信神话202141 分钟前
第六章:迷你项目:「投壶」单关卡小游戏
前端