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

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()
})
相关推荐
江华森5 小时前
全链路可观测落地记:kube-prometheus-stack 在 K3s 上的 8 个坑与一整套修复脚本
前端
deli0075 小时前
27 寸 4K 开 125% 为什么发虚?PPI 和缩放一次算清
前端
广州华水科技5 小时前
当大坝面临风险时,如何有效实施单北斗GNSS变形监测?
前端
AiMan6 小时前
Poe还是不可以导出左侧所有对话,只能单条内容导出,方法不对吗
前端
AiMan7 小时前
文心生成的内容能否下载吗?
前端
前端双越老师7 小时前
程序员 1v1 访谈系列第十四期:接受焦虑 拥抱不确定
前端·ai编程·全栈
deli0078 小时前
MCP 协议 6 条消息拆开看:AI 为什么能自己读文件调接口
前端
风骏时光牛马8 小时前
请告诉我标题对应的内容、想要的风格,我马上给你生成。
前端
deli0079 小时前
OAuth 2.0 授权码流程实测:4 次跳转,少个 state 就被劫持
前端