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

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()
})
相关推荐
计算机魔术师16 分钟前
黄仁勋台上接特朗普电话开免提,全场听到一句话:AI 不会减速
前端
yivifu38 分钟前
HTML元素的textContent和innerText两个属性的差别
前端·html
咸鱼老弟1 小时前
Speculative Decoding(投机采样):大模型"先猜后验",生成速度翻倍
前端·算法·ai编程
a1117761 小时前
网页版「MATLAB」开源
前端·开源
JianZhen✓1 小时前
解决SPA发版旧版本残留+动态路由打包失效的完整方案(附落地代码)
前端·状态模式
计算机魔术师1 小时前
Dario Amodei 发文呼吁放缓前沿 AI 开发后各方表态汇总
前端
anyup2 小时前
仍然是简单一句话,uView Pro Starter 一键清理 Skill 发布
前端·人工智能·uni-app
福兮说2 小时前
纯前端把图片压缩到指定体积:canvas.toBlob 配合二分查找
前端·javascript·canvas·图片处理
是立不是利2 小时前
CSS 入门与进阶:从选择器到响应式布局的完整指南
前端·css
镭立智能制造3 小时前
电线电缆换线频繁?MES系统如何缩短换线时间40%
前端·制造