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

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 小时前
Codex破局:前端组件秒级生成的技术文章大纲
开发语言·前端·人工智能·学习·安全·web安全
奥莱维13 小时前
KNX酒店方案_KNX专用线与高端酒店技术逻辑
java·服务器·前端·数据库
qq_4523962314 小时前
第二篇:《前端架构的“道”与“术”:架构设计原则与决策框架》
前端·架构
用户9210802628614 小时前
AI 消息列表虚拟滚动:这是业务问题,还是组件能力边界?
前端
前端snow14 小时前
ai agent---mcp知识汇总
前端
计算机魔术师15 小时前
AI 写了一半代码,谁来背锅?Anthropic 的安全重构笔记
前端
明月_清风15 小时前
vLLM 深度实战:2026 年生产级 LLM 推理引擎完全指南
前端·后端·ai编程
风月说与山鬼15 小时前
七、uni-app页面与组件生命周期
前端·uni-app
绿岛之北15 小时前
Electron 安全第三章:URL 加载与 WebView
前端·electron
sunoo-22915 小时前
C 语言文件 IO 全攻略:从基础函数到实战踩坑(BMP 读取 + 词典查询)
linux·c语言·前端·笔记·vscode·学习