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

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()
})
相关推荐
程序员黑豆12 小时前
鸿蒙应用开发之V2状态管理:@Local、@ObservedV2、@Trace 使用教程
前端·后端·harmonyos
锻炼²12 小时前
Edge 地址栏搜索被其他浏览器劫持
前端·edge
Slice_cy12 小时前
Mint 自研框架设计与实现:从重复开发走向配置驱动(三)
前端·后端·架构
JoyT12 小时前
Nuxt 3的核心设计与静态官网应用
前端·javascript·vue.js
程序员黑豆13 小时前
鸿蒙应用开发之@State 装饰器详解:从基本类型到 @Observed/@ObjectLink/@Track 嵌套监听
前端·harmonyos
杉氧13 小时前
Flutter 像素级还原实战:用 CustomPaint 与 Bezier 曲线手绘精致图针
android·前端·flutter
金融小白数据分析之路14 小时前
绍兴市镇街echarts 制作
前端·数据库·echarts
Slice_cy15 小时前
Mint 自研框架设计与实现:从重复开发走向配置驱动(二)
前端·后端·架构
greenbbLV15 小时前
积分兑换商城供应商挑选:避坑要点与靠谱选择解析
前端·小程序
a11177615 小时前
3D 建筑编辑器 Pascal Editor THreeJS 开源
前端·3d·html