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

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()
})
相关推荐
行星飞行16 小时前
从 cursor 、 Claude code 迁移到 codex,30 分钟快速上手 codex 常用技巧
前端
Pu_Nine_916 小时前
前端埋点从入门到企业实践:手写一个Demo + 主流方案对比
前端·埋点
ZC跨境爬虫16 小时前
跟着 MDN 学 HTML day_56:(HTML 表格基础完全指南)
前端·javascript·ui·html·音视频
Dxy123931021616 小时前
CSS滤镜使用方法完全指南
前端·css
AC赳赳老秦17 小时前
OpenClaw与WPS宏联动:批量执行WPS复杂操作,解决办公表格批量处理难题
java·前端·数据库·自动化·需求分析·deepseek·openclaw
Larcher17 小时前
# 告别“古法编程”:吴恩达 AI 课程学习笔记与生日贺卡项目实战
前端·github·ai编程
用户8524950718417 小时前
# 大二前端新人的AI初体验:跟着吴恩达学“Vibe Coding”,我如何用提示词“指挥”AI写代码?
前端
bupt_0117 小时前
Hermes深入理解及源码解析(二):Hermes的记忆机制
java·服务器·前端
飘尘17 小时前
WebAssembly 是什么?它为什么重要?
前端·javascript
情绪总是阴雨天~17 小时前
大模型 Function Call(函数调用)详解:原理、实践与数据库智能查询 Agent
前端·数据库·人工智能