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

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 小时前
我看了 Hugging Face 的 Daily Papers,发现这件事
前端
yu俞娥宝13 小时前
Codex官网前端可抄吗?技术拆解、风险边界与合规借鉴方案
前端
捧 花14 小时前
FastAPI 基础语法:从一个完整接口理解 Web API 的设计
前端·python·fastapi·middleware
Hilaku14 小时前
一行 CSS 新特性干掉 20 行 JavaScript ?
前端·javascript·程序员
JarvanMo14 小时前
AI 写代码暴增 161 倍,移动开发有没有变得更差?
前端
梦曦i14 小时前
RouterLink v2.5.0:H5端原生能力全面回归
前端·uni-app
小林ixn14 小时前
React + Zustand + JWT:从零实现登录鉴权与请求拦截
前端·react.js·前端框架
葡萄城技术团队14 小时前
下拉多选类型单元格:在 SpreadJS 里接入 xm\-select
前端
粥里有勺糖15 小时前
视野修炼-技术周刊第130期 | 光影效果
前端·javascript·github
小岛前端15 小时前
AI Skills 已经封神,但新的问题却越来越严重!
前端·后端·github