[大屏适配]根据屏幕尺寸获取伸缩比例
用于检查浏览器窗口的宽度,并根据宽度调整页面的缩放级别,以适应不同的屏幕分辨率。具体来说,代码分为以下几个部分:
-
getLayoutWidth()
函数用于获取当前浏览器窗口的宽度。该函数首先获取屏幕的宽度和高度,然后根据宽高比计算出适合的宽度,并返回该宽度。 -
getZoomLevel()
函数用于根据当前浏览器窗口的宽度和起始缩放级别、结束缩放级别计算出当前的缩放级别。该函数首先获取起始宽度和结束宽度以及对应的缩放级别,然后根据线性插值的方法计算出当前的缩放级别,并返回该级别。 -
notSupportZoom
变量用于判断当前浏览器是否支持缩放。该变量定义了一个自执行函数,该函数通过判断浏览器的 UserAgent、ActiveXObject、CSS、MouseEvent 等属性来判断当前浏览器是否支持缩放。 -
checkZoom()
函数用于检查当前浏览器窗口的宽度,并根据宽度调整页面的缩放级别。该函数首先调用getLayoutWidth()
函数获取当前浏览器窗口的宽度,然后根据宽度计算出当前的缩放级别,并将缩放级别应用到页面上。如果当前浏览器不支持缩放,则将缩放级别设置为 1。如果当前浏览器窗口的宽度没有发生变化,则不进行任何操作。最后,该函数使用定时器定时检查浏览器窗口的宽度,并根据宽度调整页面的缩放级别。 -
在页面加载完成后,代码通过监听
DOMContentLoaded
事件来调用checkZoom()
函数,以便在页面加载完成后立即检查浏览器窗口的宽度,并根据宽度调整页面的缩放级别。
总的来说,这段代码主要用于实现页面的自适应缩放功能,以便在不同的屏幕分辨率下都能够正常显示页面内容。
// 获取布局宽度
function getLayoutWidth() {
const { width, height } = window.screen
if (width > height) {
const aspectRatio = width / height
const regularAspectRatio = 16 / 9
if (aspectRatio <= regularAspectRatio) {
return width // 返回宽度
} else {
return height * regularAspectRatio // 返回高度乘以标准宽高比
}
} else {
return width // 返回宽度
}
}
// 获取缩放级别
function getZoomLevel(width, start, end) {
const { width: startWidth, zoom: startZoom } = start
const { width: endWidth, zoom: endZoom } = end
return startZoom + ((endZoom - startZoom) * (width - startWidth)) / (endWidth - startWidth)
}
// 判断是否支持缩放
const notSupportZoom = (function () {
let ua = navigator.userAgent
return (
ua.indexOf('Firefox') > -1 ||
!!window.ActiveXObject ||
'ActiveXObject' in window ||
typeof CSS === 'undefined' ||
!CSS.supports('zoom', '1') ||
!Object.getOwnPropertyDescriptor(MouseEvent.prototype, 'pageX')
)
})()
let prevWidth
let timer = null
let hasHackProperties = false
// 检查缩放
function checkZoom() {
const currentWidth = getLayoutWidth()
if (currentWidth === prevWidth) return
prevWidth = currentWidth
if (currentWidth <= 1920 || notSupportZoom) {
window.PAGEZOOM = 1
document.documentElement.style.zoom = ''
document.documentElement.style.setProperty('--zoom-level', '1')
document.body.classList.remove('page-zoom')
} else {
const zoom =
currentWidth <= 2560
? getZoomLevel(currentWidth, { width: 1920, zoom: 1 }, { width: 2560, zoom: 1.25 })
: currentWidth > 2560 && currentWidth <= 3840
? getZoomLevel(currentWidth, { width: 2560, zoom: 1.25 }, { width: 3840, zoom: 1.75 })
: 1.75
window.PAGEZOOM = zoom
document.documentElement.style.zoom = zoom
document.documentElement.style.setProperty('--zoom-level', zoom)
document.body.classList.add('page-zoom')
if (!hasHackProperties) {
// 重写属性
Object.defineProperty(document.documentElement, 'clientHeight', {
get: function () {
return this.offsetHeight
}
})
Object.defineProperty(document.documentElement, 'clientWidth', {
get: function () {
return this.offsetWidth
}
})
try {
const originalElementFromPoint = document.elementFromPoint
const originalElementsFromPoint = document.elementsFromPoint
document.elementFromPoint = function (x, y) {
return originalElementFromPoint.call(this, x * window.PAGEZOOM, y * window.PAGEZOOM)
}
document.elementsFromPoint = function (x, y) {
return originalElementsFromPoint.call(this, x * window.PAGEZOOM, y * window.PAGEZOOM)
}
function rewriteNativeGetter(targetObj, props, nativeObj) {
var getters = props.map(function (prop) {
return Object.getOwnPropertyDescriptor(nativeObj || targetObj, prop).get
})
var setters = props.map(function (prop) {
return Object.getOwnPropertyDescriptor(nativeObj || targetObj, prop).set
})
Object.defineProperties(
targetObj,
props.reduce(function (prev, next, i) {
prev[next] = {
get: function () {
return getters[i].call(this) / window.PAGEZOOM
}
}
if (nativeObj && setters[i]) {
prev[next].set = function (value) {
return setters[i].call(this, value * window.PAGEZOOM)
}
}
return prev
}, {})
)
}
// 重写鼠标事件
rewriteNativeGetter(MouseEvent.prototype, ['pageX', 'pageY', 'clientX', 'clientY'])
// 重写元素属性
rewriteNativeGetter(
document.documentElement,
['scrollTop', 'scrollLeft', 'scrollHeight', 'scrollWidth'],
Element.prototype
)
// 重写窗口属性
rewriteNativeGetter(window, ['scrollX', 'scrollY', 'pageXOffset', 'pageYOffset', 'innerHeight', 'innerWidth'])
} catch (e) {
console.error(e)
}
hasHackProperties = true
}
}
if (!notSupportZoom && !timer) {
timer = setInterval(checkZoom, 1000) // 定时检查缩放
}
}
window.addEventListener('DOMContentLoaded', checkZoom) // 监听DOM加载事件