Day-8 處理旋轉螢幕：優化直向與橫向模式

2024 iThome 鐵人賽

DAY 8

Modern Web

新手友善園區-如何架設人生第一個網站系列第 8 篇

16th鐵人賽

zxcvbnm

2024-09-21 17:14:55

137 瀏覽

分享至

當我們開發響應式網頁時，不僅要考慮不同裝置的螢幕大小，還要考慮到使用者旋轉裝置的情況。當用戶從直向（Portrait）轉為橫向（Landscape）模式，或者反之，網頁的排版可能需要隨著螢幕方向的變化進行調整，以確保良好的閱讀和操作體驗。
在這篇文章中，我們將介紹如何使用 CSS 的orientation媒體查詢來處理螢幕旋轉，並且優化網頁在手機或平板上的顯示效果。

為什麼要處理螢幕旋轉？

大部分的裝置（特別是手機和平板）都支持螢幕旋轉功能，當用戶將裝置從直向轉為橫向時，螢幕的可視寬度與高度會發生改變，這意味著網頁的佈局可能需要重新調整，以滿足不同方向下的顯示需求。
處理螢幕旋轉有幾個原因：
1.更好的視覺效果：在橫向模式下，通常螢幕的寬度變大，這時候可以展示更多的內容，或調整字體大小讓閱讀更舒適。
2.避免顯示問題：如果不對旋轉進行適應性設計，可能導致部分內容超出螢幕邊界，或者排版錯亂。
3.提升用戶體驗：良好的旋轉處理可以提升用戶在移動裝置上的使用體驗，增加互動的便利性。

如何使用媒體查詢處理螢幕旋轉

CSS 提供了一個@media查詢參數，叫做orientation，它可以用來檢測裝置目前處於直向還是橫向。我們可以根據檢測結果來改變樣式，為不同的螢幕方向設計不同的佈局和排版。

@media (orientation: portrait) {
  /* 適用於直向模式的樣式 */
}

@media (orientation: landscape) {
  /* 適用於橫向模式的樣式 */
}

實作範例

我們來看一個簡單的範例，假設我們有一個包含**主內容區（main content）和側邊欄（sidebar）**的佈局，我們希望當螢幕處於直向模式時，側邊欄位於主內容下方，而在橫向模式時，側邊欄能與主內容並排顯示。

HTML(index.html)

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>響應式設計範例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="main-content">
      <h1>主內容區</h1>
      <p>這是響應式設計的範例，根據螢幕方向自動調整佈局。</p>
    </div>
    <div class="sidebar">
      <h2>側邊欄</h2>
      <p>這是側邊欄的內容。</p>
    </div>
  </div>
</body>
</html>

這段 HTML 包含一個主內容區和一個側邊欄，我們會使用Flexbox來實現基礎的佈局，並通過@media (orientation)進行旋轉模式的樣式調整。

CSS(styles.css)

/* 預設樣式，適用於桌面版 */
.container {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.main-content {
  flex: 3;
}

.sidebar {
  flex: 1;
  background-color: #f0f8ff;
  padding: 20px;
}

/* 直向模式：側邊欄放到主內容下方 */
@media (orientation: portrait) {
  .container {
    flex-direction: column;
  }

  .sidebar {
    margin-top: 20px;
  }
}

/* 橫向模式：側邊欄與主內容並排顯示 */
@media (orientation: landscape) {
  .container {
    flex-direction: row;
  }

  .main-content, .sidebar {
    font-size: 1.1rem; /* 調整字體大小，適應橫向顯示 */
  }
}

在 CSS 中，我們為直向模式和橫向模式設計了不同的佈局：