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

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()
})
相关推荐
deli0071 分钟前
限流算法到底怎么选?令牌桶 vs 漏桶 vs 滑动窗口 3 种同屏实测
前端
陈前端1 分钟前
AI 猜错了接口返回格式之后,我开始怀疑喂给它的上下文
前端
风花一世月3 分钟前
🏫 我把一整座校园的数据大屏塞进了一个 HTML 文件(零构建、双击即开,在线直接玩)
前端
变与不变80610 分钟前
GET请求知识详解
前端·javascript
智塑未来11 分钟前
网站建设哪家服务好?把交付前、交付中、交付后拆开看
大数据·前端
百度一下吧12 分钟前
H5 应用开发:Android、iOS 与鸿蒙安全区域适配实战
前端
风骏时光牛马2 小时前
数据可视化管理平台
前端
仿生狮子7 小时前
OpenAI 攻下千禧年难题之后,开发者似乎无动于衷
前端·数学·vibecoding
Lvan的前端笔记10 小时前
docker:每个前端项目一个 Nginx 容器还是只有一个Nginx容器
前端·nginx·docker