js如何監聽頁面縮放？

王铁柱6發表於2024-12-03
JS

在 JavaScript 中，你可以使用 window.onresize 事件來監聽瀏覽器視窗大小的變化，這包括頁面縮放。然而，resize 事件本身並不能區分是視窗大小改變還是縮放比例改變。

為了區分這兩種情況，你需要結合 visualViewport API。 visualViewport 提供了關於視口大小和縮放比例的資訊。

以下是一個結合 resize 和 visualViewport 的例子，可以監聽頁面縮放：

let lastVisualViewportWidth = window.visualViewport.width;

window.visualViewport.addEventListener('resize', () => {
  const newVisualViewportWidth = window.visualViewport.width;

  if (newVisualViewportWidth !== lastVisualViewportWidth) {
    console.log('頁面縮放已更改');
    // 在這裡執行你想要的操作，例如重新計算佈局
    lastVisualViewportWidth = newVisualViewportWidth;
  } else {
    console.log('視窗大小已更改，但縮放比例未變');
    // 處理視窗大小調整，但縮放比例不變的情況
  }
});


// 或者使用更舊的 window.onresize (相容性更好)
// 但需要注意，這種方式不能區分縮放和視窗大小調整
window.onresize = function() {
  console.log('視窗大小或縮放比例已更改 (舊方法)');
  // 需要額外的邏輯來判斷是縮放還是視窗大小調整
};


//  更精確的縮放檢測 (需要 polyfill 相容舊瀏覽器)
if (window.visualViewport) {
  window.visualViewport.addEventListener('resize', () => {
    console.log('縮放比例:', window.visualViewport.scale);
    console.log('寬度:', window.visualViewport.width);
    console.log('高度:', window.visualViewport.height);
  });
} else {
  console.warn("visualViewport API 不受支援");
  // 使用替代方案或 polyfill
}

解釋：

  1. visualViewport.width: 獲取當前視口的寬度 (受縮放影響)。
  2. addEventListener('resize', ...): 監聽 visualViewport 的 resize 事件。 當視口大小或縮放比例發生變化時，會觸發此事件。
  3. 比較寬度: 透過比較前後兩次 visualViewport.width 的值，可以判斷是否發生了縮放。如果寬度改變了，則說明發生了縮放。
  4. lastVisualViewportWidth: 儲存上一次的視口寬度，用於比較。

關鍵點:

  • 使用 visualViewport API 是檢測縮放的最可靠方法。
  • window.onresize 事件可以監聽視窗大小和縮放的變化，但需要額外的邏輯來區分它們。
  • 考慮使用 polyfill 來相容不支援 visualViewport API 的舊版瀏覽器。

使用 polyfill 相容舊瀏覽器:

你可以使用 polyfill 來為不支援 visualViewport API 的瀏覽器提供類似的功能。一個常用的 polyfill 是 viewport-units-buggyfill。 你可以透過 npm 或 yarn 安裝它：

npm install viewport-units-buggyfill

然後在你的 JavaScript 程式碼中引入並初始化它：

import viewportUnitsBuggyfill from 'viewport-units-buggyfill';
viewportUnitsBuggyfill.init();

這個 polyfill 會盡可能地模擬 visualViewport 的行為，讓你在舊版瀏覽器中也能檢測頁面縮放。

希望這個更詳細的解釋對您有所幫助！

相關文章