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

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()
})
相关推荐
想吃火锅10053 分钟前
【前端手撕】promise.all
前端
lichenyang4535 分钟前
动态加载 vs 延迟加载:为什么 demo 里「延迟」看起来没效果?
前端
cypking18 分钟前
从零搭建 Claude Code + Chrome MCP 浏览器自动化:前端 E2E 端到端测试完整教程(包含增量测试)
前端·chrome·自动化
Levi_J34 分钟前
Vue2 升级 Vue3 项目实战
前端
前端拷贝猿35 分钟前
扫码领券功能需求分析
前端
前端拷贝猿38 分钟前
设备活动弹窗功能需求分析
前端
飞天狗11143 分钟前
零基础JavaWeb入门——第五课第一小节:九大内置对象 · 第1个:request(请求对象)
java·开发语言·前端·后端·servlet
a15108416931 小时前
记一次大模型探索
java·服务器·前端
石山代码1 小时前
变量与解构
开发语言·前端·javascript
888CC++1 小时前
箭头函数(ES6)
前端·javascript·es6