網頁停止行動裝置瀏覽的雙擊縮放功能

2025-08-13

筆記如何透過 html 以及 js 的設定來禁止行動裝置瀏覽器的雙擊縮放功能。

logo

說明

最暴力的設定方式直接在 <head> 中加入以下 meta 標籤：

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

但會限制所有縮放功能，包含捏合與雙擊的縮放方式。

如果只是要單純限制雙擊縮放，避免測驗類型的網頁，因為使用者操作速度太快，而發生縮放影響使用體驗，可以透過以下的 JavaScript 來達成：

let lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
    const now = new Date().getTime();
    if (now - lastTouchEnd <= 300) {
        event.preventDefault(); // 阻止雙擊縮放
    }
    lastTouchEnd = now;
}, false);

在 Vue 中，可以將上述的 JavaScript 代碼放入 mounted 生命週期鉤子中，確保在組件掛載後開始監聽觸控事件：

export default {
  name: 'NoDoubleTapZoom',
  data() {
    return {
      lastTouchEnd: 0
    };
  },
  mounted() {
    this.handleTouchEnd = (event) => {
      const now = new Date().getTime();
      if (now - this.lastTouchEnd <= 300) {
        event.preventDefault(); // 阻止雙擊縮放
      }
      this.lastTouchEnd = now;
    };
    document.addEventListener('touchend', this.handleTouchEnd, false);
  },
  beforeUnmount() {
    document.removeEventListener('touchend', this.handleTouchEnd, false);
  }
};

更一勞永逸的方式，直接在 main.js 當中進行設定，這樣所有的 components 都會有效果。

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 全域禁止雙擊縮放
let lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
  const now = new Date().getTime();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault(); // 阻止雙擊縮放
  }
  lastTouchEnd = now;
}, false);

app.mount('#app');
#Dev