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

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()
})
相关推荐
breeze jiang12 小时前
React + WebGPU 在浏览器运行 DeepSeek:从 Worker 通信到流式生成
前端·javascript·react.js
a11177613 小时前
家居生成器 Cartoon 开源项目 3D web
前端·开源
小林ixn13 小时前
前端卡顿终结者:用 useRef 把 Web Worker 请进 React 项目
前端·react.js·前端框架
sunly_13 小时前
React 三个重要概念:Ref、Props、State 详解
前端·javascript·react.js
weixin_4316004413 小时前
前端对接 SSE 的两种常见方式
前端·后端·学习·ai·sse·nest.js
Mh13 小时前
如何使用GSAP实现一个 `pinned` 滚动楼层叙事?
前端·javascript·css
用户938515635071 天前
从零在浏览器里跑 DeepSeek-R1:WebGPU + Transformer.js 全链路实战
前端·设计模式·typescript
CodeSheep1 天前
稚晖君公司人事大变动,来了!
前端·后端·程序员
鱼樱前端1 天前
用 AI 做内容变收入
前端·人工智能·ai编程
浮生望1 天前
React + TypeScript 组件设计进阶:从类型约束到无状态组件的三次进化
前端