Nuxt 4 移动端防止双击放大

在移动端开发中，我们经常遇到 页面双击会自动放大 的问题，尤其是在 iOS 的 Safari 或 Chrome 浏览器 上。本文介绍在 Nuxt 4 项目中彻底解决双击放大的方法。

1️⃣ 问题背景

• iOS Safari/Chrome 会在页面上双击时自动放大内容，以改善小屏幕上文字的可读性。
• 传统做法是通过 <meta> 标签禁止缩放：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

• 但是在 iOS 浏览器 上，双击缩放仍然会生效，仅依赖 meta 标签无法彻底解决。

2️⃣ 原因分析

• iOS 系统控制了双击放大行为，所有浏览器都使用 WebKit 内核，因此 Chrome、Firefox 在 iOS 上表现和 Safari 一样。
• maximum-scale=1 或 user-scalable=no 只会阻止 手势缩放（pinch zoom），不能禁止双击缩放。
• 解决方案必须通过 JavaScript 拦截双击事件。

3️⃣ Nuxt 4 解决方案

在 Nuxt 4 中，可以通过 插件 全局拦截 touchend 事件，阻止双击放大。

3.1 创建插件

在 plugins/prevent-double-tap.ts 中：

export default defineNuxtPlugin(() => {
  // 只在客户端执行
  if (process.client && 'ontouchend' in document) {
    let lastTouchEnd = 0

    document.addEventListener(
      'touchend',
      (event) => {
        const now = Date.now()

        // 排除 input/textarea 保留缩放
        if (!(event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement)) {
          if (now - lastTouchEnd <= 300) {
            event.preventDefault() // 阻止 iOS 双击放大
          }
        }

        lastTouchEnd = now
      },
      { passive: false } // ⚠️ 必须，否则 preventDefault 失效
    )
  }
})

3.2 在 Nuxt 配置中注册插件

// nuxt.config.ts
export default defineNuxtConfig({
  plugins: ['~/plugins/prevent-double-tap.ts']
})

3.3 可选：保留输入框缩放

iOS 默认会在 input/textarea 上放大，以便用户输入。如果希望保留输入框缩放，可以这样修改插件：

if (!(event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement)) {
  event.preventDefault()
}

4️⃣ 配合 Meta 标签使用（推荐）

虽然 meta 标签不能完全禁止双击放大，但仍建议全局使用它防止手势缩放：

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' }
      ]
    }
  }
})

5️⃣ 总结

• iOS Chrome/Safari 会默认启用双击缩放，meta 标签无法完全禁止。

• 解决方案：

  1. 使用 meta 标签防止手势缩放
  2. 使用 JavaScript 插件拦截双击事件（touchend + preventDefault）

• 可选：保留输入框缩放，提升用户体验。

通过上述方法，Nuxt 4 项目可以彻底防止移动端页面被双击放大。