(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

總結

以上是生活随笔為你收集整理的大屏网页手机缩放html,大屏页面三种缩放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。