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

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()
})
相关推荐
lichenyang45313 分钟前
鸿蒙 ArkTS 电商 Demo 闭环复盘:商品列表 → 详情加购 → 全局购物车持久化
前端
甲维斯23 分钟前
Opus4.8 才是真的夯爆了!实测 9个例子表现出众!
前端·人工智能
Doris_20231 小时前
eslint
前端·架构·前端框架
_喆2 小时前
视频切片上传
前端
前端拷贝猿2 小时前
微信绑定流程
前端
ZC跨境爬虫2 小时前
跟着 MDN 学CSS day_51:支持旧浏览器的布局策略
前端·css·html·tensorflow·媒体
Larcher2 小时前
从 0 到 1:Node.js 调用 AI API 的完整避坑指南
前端·javascript·css
ricardo19732 小时前
Web Worker + 时间切片:破解主线程阻塞的两种武器
前端·面试
wuhen_n2 小时前
LangGraph 入门:AI Agent 工作流可视化编排
前端·langchain·ai编程