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

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 分钟前
websocket及SSE原理解析
前端
妙码生花42 分钟前
从 PHP 到 AI + Golang,程序员自救转型手记(八):设计管理员模型、热重载配置
前端·后端·go
政采云技术1 小时前
Chrome 高阶调试技巧
前端
牧艺1 小时前
HTML-in-Canvas 深度解析:让 Canvas 真正「吃上」HTML 这碗饭
前端·html·canvas
秦瑜华1 小时前
前端页面添加AI自动翻译按钮
前端·openai·ai编程
沉浸学习的匿名网友1 小时前
什么是 .gitignore?为什么每个 Git 项目几乎都离不开它?
前端·git
Apifox1 小时前
从 Postman 迁移到 Apifox:Workspace、Collection、Environment 现在可以一起导入了
前端·后端·程序员
cidy_983 小时前
Agent\-Reach 保姆级教程|AI Agent 全网数据源扩展工具(免费无调用费)
前端
乘风gg3 小时前
当 AI 遇到私有组件,Cli 才是 AI Coding 的起点
前端·ai编程·cursor
40岁搬砖工3 小时前
直观高效的 VSCode 略缩图定位注释 MARK
前端