分享 CSS 中的 orientation，它是一個強大的媒體特性，用來根據設備的屏幕方向來調整網頁內容的樣式。當前設備的屏幕方向可以是橫向 (landscape) 或縱向 (portrait)。但在移動裝置使用時遇到一個問題分享一下。

什麼是 orientation: landscape？

orientation: landscape 是一個媒體查詢（Media Query），用於檢測設備的屏幕方向是否為橫向。

當屏幕的寬度大於高度時，屏幕方向被認為是橫向的。這個媒體查詢通常應用於設計需要特別針對橫向顯示進行調整的網頁內容。

使用方法

@media (orientation: landscape) {
    /* 在橫向模式下應用的樣式 */
    body {
        background-color: #f0f0f0;
    }

    .container {
        width: 80%;
        margin: 0 auto;
    }
}

當設備處於橫向模式時，body 的背景顏色將變為灰色，並且 .container 元素的寬度設置為 80%。

注意事項

• 請在多種設備上測試網頁，確保橫向模式和縱向模式下的體驗都達到預期效果。
• 在橫向和縱向模式之間保持設計的一致性很重要，避免用戶在轉換屏幕方向時產生混淆。
• 不要過度依賴 orientation，應與其他響應式設計技術結合使用，如 flexbox 和 grid，以提供更靈活的布局。

坑點

因為它實際的作用是根據畫面的寬高去判斷當用戶使用移動裝置並且點開虛擬鍵盤時，螢幕的高度會變化，這可能會意外觸發 orientation 的變更。

更好的做法

透過監聽 JavaScript 的 orientationchange 事件，可以更精確地控制頁面樣式的變化。這樣可以依據實際的寬高來動態調整頁面，而不僅僅依賴於媒體查詢。避免在開啟虛擬鍵盤時不必要的觸發，從而提供更好的用戶體驗。

window.addEventListener('orientationchange', function() {
    if (window.orientation === 90 || window.orientation === -90) {
        console.log('Landscape mode');
        // 在此處執行需要的橫向樣式或功能
    } else {
        console.log('Portrait mode');
        // 在此處執行需要的直式樣式或功能
    }
});

結語

orientation: landscape 雖然是 CSS 中一個強大的工具，但在某些特定情況下會造成問題，還是應選擇使用 JavaScript 的 orientationchange 事件，來檢查裝置是否轉向。記得在不同的裝置上進行充分的測試，以確保在各種情境下都能達到預期的效果。