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

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()
})
相关推荐
程序员黑豆13 小时前
鸿蒙应用开发 @Builder 使用教程:从入门到精通
前端·harmonyos
CCYe、13 小时前
限流与配额:企业AI网关的工程实践
前端·人工智能
看谷秀13 小时前
arkts- 6 手势/沉浸式/深浅色/性能/组件补充/访问/js交互/通知/Native交互
前端·arkts
划船不慎掉水顺便摸鱼13 小时前
TipTap 不是编辑器,是编辑器构造器:ProseMirror 模型驱动的富文本架构
前端
小高00713 小时前
🔥🔥🔥TypeScript 7 正式版来了:别只看 10 倍速度,这 4 个迁移坑更值得注意
前端·javascript·面试
凉茶社13 小时前
shadcn/ui 默认改用 Base UI,Radix 被放弃了吗?
前端
Vuji13 小时前
ReAct 与 Plan-Execute:两种 Agent 范式的实战对比
前端·agent
用户615958680002213 小时前
从零原生搭建一个微前端简易框架
前端
小月土星13 小时前
React + TypeScript 企业级开发实战:从类型约束到组件设计
前端
沙洲13 小时前
Vite 环境变量终极指南:从原理到企业级实战
前端