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

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()
})
相关推荐
非优秀程序员15 分钟前
第10章 千团出世|《互联网产品恩仇录》
前端
非优秀程序员20 分钟前
第11章 小高在对面|《互联网产品恩仇录》
前端
非优秀程序员20 分钟前
第14章 只剩美团|《互联网产品恩仇录》
前端
非优秀程序员22 分钟前
第09章 老乡何必为难老乡|《互联网产品恩仇录》
前端
非优秀程序员32 分钟前
第03章 三大门户,烽烟起于瀛海威|《互联网产品恩仇录》
前端
曦樂~5 小时前
【Web Development】02 CSS
前端·css
风骏时光牛马5 小时前
后端服务接口开发与数据逻辑处理
前端
东鹏特饮5 小时前
经典打砖块(Breakout)游戏
前端·css·css3
IT_陈寒5 小时前
Vite的HMR把我整不会了:一个生产环境的热更新坑
前端·人工智能·后端
Mh5 小时前
如何使用双缓冲优化视频切换
前端