当前位置：首页 > uni-app

uniapp 页面缩放

2026-02-06 05:50:52uni-app

uniapp 页面缩放实现方法

在uniapp中实现页面缩放功能，可以通过以下几种方式实现：

使用CSS transform属性

通过CSS的transform属性实现缩放效果，适用于静态页面或简单交互场景：

.page-container {
  transform: scale(0.8);
  transform-origin: 0 0;
  width: 125%; /* 反向补偿缩放后的宽度 */
  height: 125%; /* 反向补偿缩放后的高度 */
}

动态调整viewport

在manifest.json中配置可缩放的viewport：

"h5": {
  "template": "template.h5.html",
  "viewport": "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes"
}

使用JavaScript动态缩放

通过监听手势或按钮事件动态调整页面缩放比例：

data() {
  return {
    scaleValue: 1
  }
},
methods: {
  handleZoom(type) {
    if(type === 'in' && this.scaleValue < 1.5) {
      this.scaleValue += 0.1
    } else if(type === 'out' && this.scaleValue > 0.5) {
      this.scaleValue -= 0.1
    }
    const el = document.querySelector('.page-container')
    if(el) {
      el.style.transform = `scale(${this.scaleValue})`
    }
  }
}

处理缩放后的布局问题

缩放可能导致布局错乱，需要额外处理：

.scaled-element {
  transform: scale(1) !important; /* 防止内部元素被二次缩放 */
  width: calc(100% / var(--scale-factor)); /* 动态计算宽度 */
}

手势缩放实现

对于需要手势缩放的情况，可以使用touch事件：

uniapp 页面缩放

let initialDistance = 0

handleTouchStart(e) {
  if(e.touches.length === 2) {
    initialDistance = Math.hypot(
      e.touches[0].pageX - e.touches[1].pageX,
      e.touches[0].pageY - e.touches[1].pageY
    )
  }
}

handleTouchMove(e) {
  if(e.touches.length === 2) {
    const currentDistance = Math.hypot(
      e.touches[0].pageX - e.touches[1].pageX,
      e.touches[0].pageY - e.touches[1].pageY
    )
    const scale = currentDistance / initialDistance
    this.scaleValue = Math.min(Math.max(0.5, scale), 2)
  }
}