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

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()
})
相关推荐
qq_1208409371几秒前
Three.js 模型加载稳定性实战:从资源失败到可用发布的工程化方案
前端·javascript·vue.js·vue3·three.js
skywalk81631 分钟前
mock数据什么意思?前端应用mock
前端
weixin199701080164 分钟前
《闲鱼商品详情页前端性能优化实战》
前端·性能优化
qq_12084093714 分钟前
Three.js 性能实战:大场景从 15FPS 到 60FPS 的工程化优化路径
开发语言·前端·javascript
Code-keys10 分钟前
【gdb工具】 使用详细介绍
前端·chrome
guhy fighting14 分钟前
使用vue-virtual-scroller导致打包报错
前端·javascript·vue.js·webpack
UXbot17 分钟前
如何用 AI 生成产品原型:从需求描述到可交互界面的完整 5 步流程
前端·人工智能·ui·交互·ai编程
hbstream17 分钟前
Hermes Agent 一周暴涨五万 Star,但我劝你别急着追
前端·人工智能
光影少年28 分钟前
前端开发桌面端都有哪些框架?
前端·react.js·electron
Cecilialana30 分钟前
同域名、同项目、仅 hash 变化,window.location.href 不跳转
前端·javascript