屏幕旋轉角度檢測可通過三種方案實現并兼容處理1.screen.orientation api為現代瀏覽器推薦方案可獲取具體角度和類型但兼容性差2.window.orientation適用于老舊移動端設備返回方向值但已被廢棄3.window.matchmedia通過媒體查詢判斷橫豎屏適合響應式設計但無法獲取具體角度兼容性問題可通過優先級選擇處理先嘗試screen.orientation不支持則window.orientation最后window.matchmedia同時resize事件頻繁觸發時可用debounce或throttle優化在react中可用useeffect監聽事件vue則用生命周期鉤子添加移除監聽確保組件響應旋轉變化。
屏幕旋轉角度檢測，本質上是為了適配不同設備方向，讓你的JS應用在橫豎屏切換時都能流暢運行。有幾種方案可以實現，選擇哪個取決于你的具體需求和兼容性考量。
解決方案
-
screen.orientation API (現代瀏覽器推薦)
這是最現代、最直接的方式。screen.orientation對象提供了當前屏幕的旋轉角度和類型。
function handleOrientationChange() { console.log("Orientation: " + screen.orientation.type); console.log("Angle: " + screen.orientation.angle); // 根據角度和類型調整你的UI } screen.orientation.addEventListener("change", handleOrientationChange); // 初始調用 handleOrientationChange();- 優點: 簡潔、易用、語義化。
- 缺點: 兼容性問題。老舊瀏覽器不支持。
-
window.orientation (移動端老版本瀏覽器)
這個屬性在移動端老版本瀏覽器中使用較多，但已逐漸被screen.orientation取代。它返回一個表示屏幕方向的值：
- 0: 正常方向 (豎屏)
- 90: 順時針旋轉90度 (橫屏)
- 180: 旋轉180度 (倒立)
- -90: 逆時針旋轉90度 (橫屏)
function handleOrientationChange() { const orientation = window.orientation; console.log("Orientation: " + orientation); // 根據orientation調整你的UI } window.addEventListener("orientationchange", handleOrientationChange); // 初始調用 handleOrientationChange();- 優點: 兼容性相對較好，尤其是在一些老舊的移動設備上。
- 缺點: 已被廢棄，未來可能不再支持。
-
window.matchMedia (響應式設計)
這種方法不直接檢測角度，而是通過css媒體查詢來判斷屏幕的寬高比，從而推斷出橫豎屏狀態。
function handleOrientationChange() { if (window.matchMedia("(orientation: portrait)").matches) { console.log("Portrait mode"); // 豎屏模式 } else if (window.matchMedia("(orientation: landscape)").matches) { console.log("Landscape mode"); // 橫屏模式 } } window.addEventListener("resize", handleOrientationChange); // 注意這里是resize事件 // 初始調用 handleOrientationChange();- 優點: 適用于響應式設計，可以更靈活地控制不同方向下的樣式。
- 缺點: 無法直接獲取旋轉角度，只能判斷橫豎屏。resize事件可能會頻繁觸發，需要注意性能優化。
如何處理不同瀏覽器的兼容性問題？
優雅降級，是王道。先嘗試screen.orientation，如果不支持，再嘗試window.orientation，最后使用window.matchMedia作為兜底方案。
function getOrientation() { if (screen.orientation && screen.orientation.type) { return screen.orientation.type; } else if (window.orientation !== undefined) { return window.orientation; } else if (window.matchMedia("(orientation: portrait)").matches) { return "portrait"; } else if (window.matchMedia("(orientation: landscape)").matches) { return "landscape"; } else { return "unknown"; } } function handleOrientationChange() { const orientation = getOrientation(); console.log("Orientation: " + orientation); // 根據orientation調整你的UI } window.addEventListener("orientationchange", handleOrientationChange); window.addEventListener("resize", handleOrientationChange); handleOrientationChange();
為什么 resize 事件在某些情況下會頻繁觸發？如何優化？
resize事件會在窗口大小改變時觸發，包括橫豎屏切換，以及瀏覽器窗口大小調整等。頻繁觸發會導致性能問題。
-
Debouncing: 使用 debounce 函數，限制事件處理函數的執行頻率。
function debounce(func, delay) { let timeout; return function(...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => func.apply(context, args), delay); }; } const debouncedHandleOrientationChange = debounce(handleOrientationChange, 250); // 250ms延遲 window.addEventListener("resize", debouncedHandleOrientationChange); -
Throttling: 使用 throttle 函數，確保事件處理函數在固定的時間間隔內最多執行一次。
function throttle(func, limit) { let lastFunc; let lastRan; return function(...args) { const context = this; if (!lastRan) { func.apply(context, args); lastRan = Date.now(); } else { clearTimeout(lastFunc); lastFunc = setTimeout(function() { if ((Date.now() - lastRan) >= limit) { func.apply(context, args); lastRan = Date.now(); } }, limit - (Date.now() - lastRan)); } }; } const throttledHandleOrientationChange = throttle(handleOrientationChange, 250); // 250ms間隔 window.addEventListener("resize", throttledHandleOrientationChange);
如何在React或vue等框架中使用屏幕旋轉檢測？
在React中，可以使用useEffect hook來監聽屏幕旋轉事件。
import React, { useState, useEffect } from 'react'; function MyComponent() { const [orientation, setOrientation] = useState(getOrientation()); useEffect(() => { function handleOrientationChange() { setOrientation(getOrientation()); } window.addEventListener("orientationchange", handleOrientationChange); window.addEventListener("resize", handleOrientationChange); return () => { window.removeEventListener("orientationchange", handleOrientationChange); window.removeEventListener("resize", handleOrientationChange); }; }, []); function getOrientation() { // 兼容性代碼 (同上) if (screen.orientation && screen.orientation.type) { return screen.orientation.type; } else if (window.orientation !== undefined) { return window.orientation; } else if (window.matchMedia("(orientation: portrait)").matches) { return "portrait"; } else if (window.matchMedia("(orientation: landscape)").matches) { return "landscape"; } else { return "unknown"; } } return ( <div> <p>Orientation: {orientation}</p> {/* 根據orientation渲染不同的UI */} </div> ); } export default MyComponent;
Vue中的實現類似，使用mounted和beforedestroy生命周期鉤子來添加和移除事件監聽器。
總結：選擇合適的屏幕旋轉檢測方案，并做好兼容性處理，是保證你的JS應用在不同設備和瀏覽器上都能正常運行的關鍵。 別忘了優化resize事件的處理，避免性能問題。
