移动端Chrome如何实现仅单个div支持pinch缩放，其余元素固定尺寸？

针对你遇到的「仅让.legend容器支持双指缩放，其余元素固定尺寸」的需求，由于Chrome移动端的全局viewport缩放机制限制，纯CSS方案（包括touch-action、iframe独立viewport）无法实现，推荐通过JavaScript手动处理触摸事件来实现局部缩放：

实现步骤 #

1. 基础CSS配置 #

确保全局及非缩放元素禁用默认缩放行为，缩放容器固定尺寸并禁用默认触摸响应：

/* 全局：仅允许平移，禁止默认缩放 */
html, body {
  touch-action: pan-x pan-y;
  overflow: hidden;
  margin: 0;
}

/* 按钮栏、非图例标签页：固定尺寸，禁止缩放 */
.tab-bar, .tabcontent:not(.legend-tab) {
  position: fixed;
  width: 100vw;
  /* 保留你原有布局的高度、定位等样式 */
}

/* 图例容器：固定尺寸，禁用默认触摸行为 */
.legend {
  position: relative;
  width: 100%; /* 或你需要的固定宽度 */
  height: calc(100vh - 80px); /* 适配布局的固定高度 */
  overflow: auto;
  touch-action: none; /* 交给JS处理触摸逻辑 */
}

/* 图例内容容器：作为缩放的目标元素 */
.legend-content {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0; /* 以左上角为缩放原点，避免偏移 */
  min-width: 100%; /* 确保初始占满容器 */
}

2. JavaScript触摸事件处理 #

监听.legend上的双指触摸事件，计算缩放比例并应用到内容容器：

const legend = document.querySelector('.legend');
const legendContent = document.querySelector('.legend-content');

let initialDistance = 0;
let initialScale = 1;
let currentScale = 1;

// 双指触摸开始：记录初始距离和缩放比例
legend.addEventListener('touchstart', (e) => {
  if (e.touches.length === 2) {
    const [touch1, touch2] = e.touches;
    initialDistance = Math.hypot(
      touch1.clientX - touch2.clientX,
      touch1.clientY - touch2.clientY
    );
    initialScale = currentScale;
  }
});

// 触摸移动：计算缩放比例并应用
legend.addEventListener('touchmove', (e) => {
  if (e.touches.length === 2) {
    e.preventDefault(); // 阻止全局缩放/滚动干扰
    const [touch1, touch2] = e.touches;
    const currentDistance = Math.hypot(
      touch1.clientX - touch2.clientX,
      touch1.clientY - touch2.clientY
    );
    // 计算缩放比例，限制范围（可按需调整）
    currentScale = initialScale * (currentDistance / initialDistance);
    currentScale = Math.max(0.8, Math.min(currentScale, 3));
    // 应用缩放
    legendContent.style.transform = `scale(${currentScale})`;
  }
}, { passive: false }); // 必须设置passive:false才能调用preventDefault

关键说明 #

• 此方案完全绕过了Chrome的全局viewport缩放机制，通过CSS transform实现局部内容缩放，确保其他元素尺寸不受影响
• 可根据用户需求调整currentScale的最小/最大限制（代码中0.8为最小缩放，3为最大缩放）
• 之前尝试的iframe方案无效，是因为Chrome移动端会强制iframe继承父页面的viewport配置，无法独立设置缩放权限

内容的提问来源于stack exchange，提问作者perplexed