| 大屏页面三种缩放：按分辨率进行缩放、等比缩放（展示全部内容、展示部分内容和滚动条） | 您所在的位置：网站首页 › php图片显示缩放怎么弄 › 大屏页面三种缩放：按分辨率进行缩放、等比缩放（展示全部内容、展示部分内容和滚动条） |
大屏页面三种缩放：按分辨率进行缩放、等比缩放（展示全部内容、展示部分内容和滚动条）
|
前言
本文以width和height代表实际窗口的宽和高，且下文的overflow: hidden几乎不会隐藏什么东西，这么写只是一个保障。 一、按分辨率进行缩放实现效果：无论如何拖拽浏览器窗口，都使内容占满屏幕，如下图示
将宽高都设置为100%，超出部分隐藏（大屏项目理论上不会有），大屏通常是以1920*1080为基础设计页面，页面加载时，定义缩放，宽度缩放为：width/1920，高度缩放为：height/1080，设置appDom.style.transform = 'scale(' + w + ',' + h + ')'。代码如下： html,body{ margin: 0; padding: 0; font-size: 16px; overflow: hidden; font-family: "Microsoft YaHei"; width: 100%; height: 100%; } mounted () { this.resize() window.onresize = function () { this.resize() }.bind(this) document.title = sysConfig.systemTitle }, methods: { resize () { // 系统整体缩放 let cliWidth = document.documentElement.clientWidth || document.body.clientWidth let cliHeight = document.documentElement.clientHeight || document.body.clientHeight let contW = 1920 let contH = 1080 let w = cliWidth / contW let h = cliHeight / contH let appDom = document.querySelector('#app') appDom.style.transform = 'scale(' + w + ',' + h + ')' appDom.style.transformOrigin = 'top left' appDom.style.width = contW + 'px' appDom.style.height = contH + 'px' } } 二、窗口分辨率缩放 + 等比缩放 + 留白(窗口始终呈现等比之后的页面)实现效果：无论如何拖拽浏览器窗口，都使内容按照1920:1080的比例缩放，如果窗口宽高比与之不同，将全部内容展示出来，其余部分展示空白。如下图示（也可能是右边留白）：
设置宽高为100%，超出部分隐藏（这种情况下一定不会有超出部分，只可能比页面内容区展示的多，且填充为白色）。 先确定系统宽高比为1920：1080 如果width刚好为1920，则按照宽度为1，高度为：height/1080的比例缩放如果实际窗口的width/height比这个比例大，则按照weight和height都为height/1080进行缩放如果实际窗口的width/height比这个比例小，则按照weight和height都为weight/1920进行缩放 html,body{ margin: 0; padding: 0; font-size: 16px; overflow: hidden; font-family: "Microsoft YaHei"; width: 100%; height: 100%; } resize () { // 系统整体缩放 let cliWidth = document.documentElement.clientWidth || document.body.clientWidth let cliHeight = document.documentElement.clientHeight || document.body.clientHeight let contW = 1920 let contH = 1080 let w = cliWidth / contW let h = cliHeight / contH let appDom = document.querySelector('#app') let size = cliWidth / cliHeight if (cliWidth === screen.width) { appDom.style.transform = 'scale(' + w + ',' + h + ')' } else if (size > contW / contH) { appDom.style.transform = 'scale(' + h + ',' + h + ')' } else { appDom.style.transform = 'scale(' + w + ',' + w + ')' } appDom.style.transformOrigin = 'top left' appDom.style.width = contW + 'px' appDom.style.height = contH + 'px' } 三、窗口分辨率缩放 + 等比缩放 + 不留白而改用滚动条(窗口不呈现等比后全部页面，以浏览器滚动条去查看隐藏页面)实现效果：无论如何拖拽浏览器窗口，都使内容按照1920:1080的比例缩放，如果窗口宽高比与之不同，将全部内容展示出来，超出部分由滚动条滚动查看。如下图示（也可能是横向滚动条）：
不设置宽高，body初始设置超出部分隐藏（这种情况很可能有超出部分）。 先确定系统宽高比为1920：1080 如果width刚好为1920，则按照宽度为1，高度缩放比例为：height/1080，设置宽高为100%，超出部分隐藏（理论上不会有超出部分）。如果实际窗口的width/height比这个比例大，则按照weight和height都为weight/1920进行缩放，此时是出现纵向滚动条，设置body的高度为实际dom高度，宽度即为实际窗口宽度，设置允许出现纵向滚动条，禁止横向滚动（因为不会有横向的内容没有展示，如果有，请检查超出部分的样式）。如果实际窗口的width/height比这个比例小，则按照weight和height都为height/1080进行缩放此时是出现横向滚动条，设置body的高度为实际窗口高度，宽度即为实际dom宽度，设置允许出现横向滚动条，禁止纵向滚动（因为不会有纵向的内容没有展示，如果有，请检查超出部分的样式）。 html,body{ margin: 0; padding: 0; font-size: 16px; font-family: "Microsoft YaHei"; } body{ overflow: hidden; } resize () { // 系统整体缩放 let cliWidth = document.documentElement.clientWidth || document.body.clientWidth let cliHeight = document.documentElement.clientHeight || document.body.clientHeight let contW = 1920 let contH = 1080 let w = cliWidth / contW let h = cliHeight / contH let appDom = document.querySelector('#app') let size = cliWidth / cliHeight if (cliWidth === screen.width) { appDom.style.transform = 'scale(' + w + ',' + h + ')' $('body').css('height', '100%') $('body').css('width', '100%') $('html').css('overflow-y', 'hidden') $('html').css('overflow-x', 'hidden') } else if (size > contW / contH) { appDom.style.transform = 'scale(' + w + ',' + w + ')' $('body').css('height', 1080 / 1920 * cliWidth + 'px') $('body').css('width', cliWidth + 'px') $('html').css('overflow-y', 'auto') $('html').css('overflow-x', 'hidden') } else { appDom.style.transform = 'scale(' + h + ',' + h + ')' $('body').css('width', 1920 * cliHeight / 1080 + 'px') $('body').css('height', cliHeight + 'px') $('html').css('overflow-x', 'auto') $('html').css('overflow-y', 'hidden') } appDom.style.transformOrigin = 'top left' appDom.style.width = contW + 'px' appDom.style.height = contH + 'px' } 总结本篇记录了大屏的三种缩放的具体实现，记录于此，可供个人学习和参考，如有更好的办法，请斧正~ |
【本文地址】
公司简介
联系我们