大屏网页手机缩放html,大屏页面三种缩放

(1)按分辨率进行缩放

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

this.$store.dispatch('view/setResize', [w, h])

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'

}

}

(2)窗口分辨率缩放 + 等比缩放(窗口始终呈现等比之后的页面)

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) {

this.$store.dispatch('view/setResize', [w, h])

appDom.style.transform = 'scale(' + w + ',' + h + ')'

} else if (size > contW / contH) {

this.$store.dispatch('view/setResize', [w, h])

appDom.style.transform = 'scale(' + h + ',' + h + ')'

} else {

this.$store.dispatch('view/setResize', [w, w])

appDom.style.transform = 'scale(' + w + ',' + w + ')'

}

appDom.style.transformOrigin = 'top left'

appDom.style.width = contW + 'px'

appDom.style.height = contH + 'px'

}

html,body{

margin: 0;

padding: 0;

font-size: 16px;

overflow: hidden;

font-family: "Microsoft YaHei";

width: 100%;

height: 100%;

}

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

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) {

this.$store.dispatch('view/setResize', [w, h])

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) {

this.$store.dispatch('view/setResize', [w, w])

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 {

this.$store.dispatch('view/setResize', [h, h])

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'

}

html,body{

margin: 0;

padding: 0;

font-size: 16px;

font-family: "Microsoft YaHei";

}

body{

overflow: hidden;

}

标签：body,style,缩放,cliWidth,let,大屏,document,appDom,页面

来源： https://www.cnblogs.com/sxww-zyt/p/12809241.html