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

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()
})
相关推荐
袋鼠云数栈UED团队3 分钟前
一套 Spec-First 的 AI 编程工作流
前端·人工智能
袋鼠云数栈前端7 分钟前
一套 Spec-First 的 AI 编程工作流
前端·ai+
angerdream10 分钟前
Android手把手编写儿童手机远程监控App之vue3 路由守卫
前端
不服老的小黑哥17 分钟前
AI规范驱动编程-harness工程项目实战
前端
vivo互联网技术18 分钟前
从 Web 到桌面:基于 Tauri 2.0 + Vue 3 打造 vivo 线下门店「大头贴」拍照体验系统
前端·rust
光影少年20 分钟前
React 合成事件机制、和原生事件区别、事件冒泡阻止
前端·react.js·掘金·金石计划
没有鸡汤吃不下饭20 分钟前
告别手动对接口:我用 OpenAPI JSON 做了一个前端接口同步 Skill
前端·ai编程
空栈独白21 分钟前
NestJS实战-前后端联调
前端
米饭同学i21 分钟前
浏览器记住密码导致忘记密码页面输入框回显错乱?看这篇就够了
前端
孤舟望月21 分钟前
NestJS实战-后端开发-全局配置
前端