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

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()
})
相关推荐
IT_陈寒31 分钟前
Python性能提升50%:这5个隐藏技巧让你的代码快如闪电⚡
前端·人工智能·后端
懒人村杂货铺39 分钟前
微前端QianKun的使用以及坑点问题
前端
qq_3665775142 分钟前
Vue3创建项目,只能localhost访问问题处理
前端·javascript·vue.js
一个处女座的程序猿O(∩_∩)O1 小时前
React Router 路由模式详解:HashRouter vs BrowserRouter
前端·react.js·前端框架
Caster_Z1 小时前
WinServer安装NPM(Nginx Proxy Manager),并设置反向代理和开启https
前端·nginx·npm
顾安r1 小时前
11.22 脚本 手机termux项目分析(bash)
前端·python·stm32·flask·bash
是你的小橘呀2 小时前
JavaScript 原型链解密:原来 proto 和 prototype 这么好懂
前端·javascript·前端框架
ohyeah2 小时前
使用 LocalStorage 实现本地待办事项(To-Do)列表
前端·javascript
Jing_Rainbow2 小时前
【前端三剑客-6/Lesson11(2025-10-28)构建现代响应式网页:从 HTML 到 CSS 弹性布局再到 JavaScript 交互的完整指南 🌈
前端·javascript
非专业程序员2 小时前
精读 GitHub - servo 浏览器(一)
前端·ios·rust