116 lines
2.8 KiB
JavaScript
116 lines
2.8 KiB
JavaScript
|
/**
|
|||
|
|
* 简化版缩放适配工具
|
|||
|
|
*/
|
|||
|
|
class ZoomAdapter {
|
|||
|
|
constructor() {
|
|||
|
|
// ===== 可调整的配置参数 =====
|
|||
|
|
this.maxZoom = 3 // 触发调整的缩放阈值（默认3倍）
|
|||
|
|
this.targetZoom = 2 // 调整后的目标缩放（默认2倍）
|
|||
|
|
this.isInitialized = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
init() {
|
|||
|
|
if (typeof window === 'undefined' || typeof document === 'undefined')
|
|||
|
|
return
|
|||
|
|
if (this.isInitialized)
|
|||
|
|
return
|
|||
|
|
|
|||
|
|
// 绑定事件
|
|||
|
|
window.addEventListener('resize', () => this.checkZoom())
|
|||
|
|
window.addEventListener('orientationchange', () => {
|
|||
|
|
setTimeout(() => this.checkZoom(), 500)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 防止双击缩放
|
|||
|
|
let lastTouchEnd = 0
|
|||
|
|
document.addEventListener('touchend', (event) => {
|
|||
|
|
const now = Date.now()
|
|||
|
|
if (now - lastTouchEnd <= 300) {
|
|||
|
|
event.preventDefault()
|
|||
|
|
}
|
|||
|
|
lastTouchEnd = now
|
|||
|
|
}, false)
|
|||
|
|
|
|||
|
|
this.checkZoom()
|
|||
|
|
this.isInitialized = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getCurrentZoom() {
|
|||
|
|
return Math.max(
|
|||
|
|
window.outerWidth / window.innerWidth,
|
|||
|
|
window.devicePixelRatio,
|
|||
|
|
window.screen.width / window.innerWidth,
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
checkZoom() {
|
|||
|
|
const zoom = this.getCurrentZoom()
|
|||
|
|
|
|||
|
|
if (zoom > this.maxZoom) {
|
|||
|
|
this.adjust(zoom)
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
this.reset()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
adjust(zoom) {
|
|||
|
|
try {
|
|||
|
|
// 计算调整比例：目标缩放 / 当前缩放
|
|||
|
|
const ratio = this.targetZoom / zoom
|
|||
|
|
|
|||
|
|
// 应用调整
|
|||
|
|
document.body.style.transform = `scale(${ratio})`
|
|||
|
|
document.body.style.transformOrigin = 'top left'
|
|||
|
|
document.body.style.width = `${100 / ratio}%`
|
|||
|
|
document.body.style.height = `${100 / ratio}%`
|
|||
|
|
}
|
|||
|
|
catch (e) {
|
|||
|
|
console.warn('缩放调整失败:', e)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
reset() {
|
|||
|
|
try {
|
|||
|
|
document.body.style.transform = ''
|
|||
|
|
document.body.style.transformOrigin = ''
|
|||
|
|
document.body.style.width = ''
|
|||
|
|
document.body.style.height = ''
|
|||
|
|
}
|
|||
|
|
catch (e) {
|
|||
|
|
console.warn('缩放重置失败:', e)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
addZoomStyles() {
|
|||
|
|
const style = document.createElement('style')
|
|||
|
|
style.id = 'zoom-adapter-styles'
|
|||
|
|
style.textContent = `
|
|||
|
|
.zoom-adaptive {
|
|||
|
|
font-size: 16px !important;
|
|||
|
|
line-height: 1.5 !important;
|
|||
|
|
}
|
|||
|
|
.zoom-adaptive input,
|
|||
|
|
.zoom-adaptive button,
|
|||
|
|
.zoom-adaptive select,
|
|||
|
|
.zoom-adaptive textarea {
|
|||
|
|
font-size: 16px !important;
|
|||
|
|
min-height: 44px !important;
|
|||
|
|
padding: 8px 12px !important;
|
|||
|
|
}
|
|||
|
|
.zoom-adaptive img {
|
|||
|
|
max-width: 100% !important;
|
|||
|
|
height: auto !important;
|
|||
|
|
}
|
|||
|
|
.zoom-adaptive table {
|
|||
|
|
max-width: 100% !important;
|
|||
|
|
overflow-x: auto !important;
|
|||
|
|
}
|
|||
|
|
`
|
|||
|
|
document.head.appendChild(style)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default new ZoomAdapter()
|
|||
|
|
export { ZoomAdapter }
|