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

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()
})
相关推荐
M ? A7 小时前
你的 Vue 3 响应式状态,VuReact 如何生成 React Hooks 依赖数组?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
FlyWIHTSKY7 小时前
HTML 中 `<span>` 和 `<div>` 详细对比
前端·html
competes7 小时前
React.js JavaScript前端技术脚本运行框架。程序员进行研发组项目现场工作落地的一瞬之间适应性恒强说明可塑性强度达到应用架构师的考核标准
前端·javascript·人工智能·react.js·java-ee·ecmascript
2401_832635587 小时前
踩坑分享IntelliJ IDEA 打包 Web 项目 WAR 包(含 Tomcat 部署 + 常见问题解决)
前端·tomcat·intellij-idea
Evavava啊7 小时前
Android WebView 中 React useState 更新失效问题
android·前端·react.js·渲染
恋恋风尘hhh7 小时前
Web 端请求签名机制分析:以小红书(XiaoHongShu)x-s 参数为例
前端
包子源7 小时前
React-PDF 与 Web 预览「像素级」对齐实践
前端·react.js·pdf
jiayong238 小时前
第 25 课:给学习笔记页加上搜索、标签筛选和 URL 同步
开发语言·前端·javascript·vue.js·学习
UXbot8 小时前
如何用 AI 快速生成完整的移动端 UI 界面:从描述到交付的实操教程
前端·ui·交互·ai编程·原型模式
南囝coding8 小时前
零成本打造专业域名邮箱:Cloudflare + Gmail 终极配置保姆级全攻略
前端·后端