檢測移動端橫豎屏的核心方法有三種：使用 screen.orientation api、matchmedia 查詢以及監聽 orientationchange 或 resize 事件。1. screen.orientation api 提供了詳細的方向類型信息，如 portrait-primary 和 landscape-primary，但兼容性較差；2. matchmedia 方法通過 css media queries 檢測屏幕方向，適用于響應式設計；3. 監聽 orientationchange 事件可精準捕捉方向變化，而 resize 事件需節流處理以優化性能。為提升兼容性，建議結合特性檢測與 fallback 方案，優先使用 screen.orientation，不支持時回退至 matchmedia 或 window.innerwidth/innerheight 判斷，并同時監聽 orientationchange 和 resize 事件以覆蓋更多瀏覽器環境。
檢測 JavaScript 中的移動端橫豎屏，核心在于監聽 orientationchange 事件或者使用 matchMedia 查詢。前者更直接，后者在某些情況下更靈活。
檢測屏幕方向，這三種技巧各有千秋，看你的具體需求了。
為什么需要檢測屏幕方向？
移動設備橫豎屏切換是很常見的用戶行為，針對不同的屏幕方向進行適配，可以極大地提升用戶體驗。例如，在橫屏模式下，可以展示更多的內容，或者調整布局以適應更寬的屏幕。如果你的網站或應用對屏幕方向不敏感，用戶可能會感到不便，影響留存率。
有幾種方法可以實現這個目標。最常見的是使用 window.orientation 屬性，但這已經被棄用了。取而代之的是使用 screen.orientation API 或者 matchMedia 查詢。screen.orientation 提供了更詳細的方向信息，例如 portrait-primary、portrait-secondary、landscape-primary 和 landscape-secondary。matchMedia 則允許你根據 css media queries 來檢測屏幕方向，這在響應式設計中非常有用。
下面是一個使用 matchMedia 的例子：
function detectOrientation() { if (window.matchMedia("(orientation: portrait)").matches) { console.log("Portrait mode"); // 豎屏模式下的處理邏輯 } else if (window.matchMedia("(orientation: landscape)").matches) { console.log("Landscape mode"); // 橫屏模式下的處理邏輯 } } // 初始檢測 detectOrientation(); // 監聽屏幕方向變化 window.addEventListener("resize", detectOrientation);
這段代碼首先定義了一個 detectOrientation 函數，該函數使用 matchMedia 來檢測當前屏幕方向。然后，它使用 addEventListener 監聽 resize 事件，以便在屏幕方向改變時重新檢測。注意，resize 事件在某些情況下可能會頻繁觸發，所以最好進行節流處理，避免性能問題。
screen.orientation API 的優勢與局限？
screen.orientation API 提供了更精確的屏幕方向信息，但兼容性不如 matchMedia。老版本的瀏覽器可能不支持這個 API。
使用 screen.orientation 的一個例子：
function detectOrientation() { if (screen.orientation) { console.log("Orientation:", screen.orientation.type); // 根據 screen.orientation.type 進行處理 } else { // 兼容舊版本瀏覽器 if (window.innerWidth > window.innerHeight) { console.log("Landscape mode (fallback)"); } else { console.log("Portrait mode (fallback)"); } } } // 初始檢測 detectOrientation(); // 監聽屏幕方向變化 window.addEventListener("orientationchange", detectOrientation);
這段代碼首先檢查 screen.orientation 是否存在。如果存在，它會輸出 screen.orientation.type，例如 portrait-primary 或 landscape-primary。如果不存在，它會使用 window.innerWidth 和 window.innerHeight 來判斷屏幕方向，這是一個兼容舊版本瀏覽器的 fallback 方法。
orientationchange 事件是專門用于監聽屏幕方向變化的事件，在支持的瀏覽器中，它比 resize 事件更可靠。
如何處理不同瀏覽器的兼容性問題？
兼容性問題是前端開發中永遠繞不開的話題。對于屏幕方向檢測，最好的策略是 feature detection 和提供 fallback 方案。
首先，使用 typeof screen.orientation !== ‘undefined’ 來檢測 screen.orientation API 是否存在。如果不存在，可以使用 matchMedia 或者 window.innerWidth 和 window.innerHeight 來進行檢測。
其次，考慮到不同瀏覽器對 orientationchange 事件的支持程度不同，可以同時監聽 resize 事件，并在 resize 事件處理函數中進行節流處理，避免性能問題。
最后，可以使用 polyfill 來為老版本的瀏覽器提供 screen.orientation API 的支持。但需要注意的是，polyfill 可能會增加代碼體積，所以需要權衡利弊。
function detectOrientation() { let orientation = "unknown"; if (screen.orientation && screen.orientation.type) { orientation = screen.orientation.type; } else if (window.matchMedia("(orientation: portrait)").matches) { orientation = "portrait"; } else if (window.matchMedia("(orientation: landscape)").matches) { orientation = "landscape"; } else { orientation = window.innerWidth > window.innerHeight ? "landscape (fallback)" : "portrait (fallback)"; } console.log("Current orientation:", orientation); // 根據 orientation 進行處理 } // 初始檢測 detectOrientation(); // 監聽屏幕方向變化 window.addEventListener("orientationchange", detectOrientation); window.addEventListener("resize", function() { // 節流處理 setTimeout(detectOrientation, 200); });
這段代碼綜合使用了 screen.orientation、matchMedia 和 window.innerWidth/innerHeight，并同時監聽了 orientationchange 和 resize 事件，以最大限度地提高兼容性。同時，對 resize 事件進行了節流處理，避免了性能問題。
