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

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()
})
相关推荐
码上上班7 小时前
shell 脚本知识点总结
前端·chrome
程序员Sunday7 小时前
Flex 和 Grid 有什么区别?一维布局、二维布局怎么选?
前端·css·面试
Jlzn88887 小时前
华南PACK线自动化率怎么统计才靠谱
前端·javascript·自动化
拖孩7 小时前
AI 时代,个人开发者到底能不能靠一个小程序赚到钱
前端·后端·微信小程序
Hilaku7 小时前
ERP选型时不问MCP,等于默认三年后再付一次集成费!
前端·javascript·程序员
程序人生8887 小时前
几百张固定位置扫描件如何离线批量清?DocConverter Web 批量去水印链路
前端
deli0077 小时前
一个汉字三种编码:UTF-8、GBK、UTF-16 逐字节对比实测
前端
庖丁解牛7 小时前
第二课:把代码保存成网页 + 认识变量 (2)
前端
代码猎人7 小时前
怎么开发一个Vue3项目
前端
梦里寻码7 小时前
从 0 到 1 用 NestJS + LangChain 搭一套可售卖的 SaaS AI 客服:挂件一行代码接入,知识库秒变 SEO 帮助中心
前端·后端·github