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

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()
})
相关推荐
林太白2 分钟前
js-var和let以及const区别
前端·面试
看谷秀13 分钟前
arkts-10 实战
前端·arkts
范小兵14 分钟前
# DevEco CLI实战:鸿蒙App「至客」从0开发到正式上架
前端·harmonyos
半生过往29 分钟前
前端工程师学习智能体开发(一)
前端·学习·状态模式
白雾茫茫丶34 分钟前
Vibecoding 一个主题切换动画库:13 种揭幕方式
前端·vue.js·react.js
计算机魔术师1 小时前
谷歌宣布 TPU 互联架构支持 100 万芯片规模,电力供应成 AI 基建核心瓶颈
前端
雪芽蓝域zzs1 小时前
第四十九节:TagsView 右键菜单(带三角箭头)给每个 tag 增加**鼠标右键菜单**(右键标签弹出:关闭、关闭其他、关闭全部)
前端·javascript·vue.js
এ慕ོ冬℘゜1 小时前
从零开发移动端医院挂号页面:适配、交互与前端实现详解
前端·javascript
掘金挖土2 小时前
前端手摸手跑路之 AI 应用开发(六)
前端·后端
liuyt20222 小时前
【javaweb】day4
前端