失眠网 > 大屏页面三种缩放：按分辨率进行缩放等比缩放（展示全部内容展示部分内容和滚动条）

大屏页面三种缩放：按分辨率进行缩放等比缩放（展示全部内容展示部分内容和滚动条）

时间：2022-01-02 13:29:51

前言

本文以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.clientWidthlet cliHeight = document.documentElement.clientHeight || document.body.clientHeightlet contW = 1920let contH = 1080let w = cliWidth / contWlet h = cliHeight / contHlet 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%;}

三、窗口分辨率缩放 + 等比缩放 + 不留白而改用滚动条(窗口不呈现等比后全部页面，以浏览器滚动条去查看隐藏页面)

实现效果：无论如何拖拽浏览器窗口，都使内容按照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.clientWidthlet cliHeight = document.documentElement.clientHeight || document.body.clientHeightlet contW = 1920let contH = 1080let w = cliWidth / contWlet h = cliHeight / contHlet appDom = document.querySelector('#app')let size = cliWidth / cliHeightif (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'}