如何讓網站支援行動裝置（響應式設計）

要讓網站支援行動裝置，請加入 viewport meta 標籤，以行動優先的方式建構版面並使用彈性寬度，然後用 CSS 斷點在較大的螢幕上重新排列版面，例如堆疊欄位、收合選單，並縮放圖片以符合螢幕。接著，在手機寬度下逐頁檢查是否有左右捲動、文字過小，或按鈕小到難以點擊的情況。在 AI 建構的網站上，一則清楚的提示加上在手機尺寸預覽中的一次檢查，通常就能解決大部分問題。

響應式設計實際上是什麼

響應式網站使用一組頁面與網址，並會依螢幕調整。它不是另外建立一個「m.」網站，而是由 CSS 在特定寬度下改變版面，這些寬度稱為斷點（breakpoints）。它的基本組成如下：

• viewport meta 標籤會告訴行動瀏覽器使用裝置的實際寬度。
• **流動版面（Fluid layouts）**使用百分比、Flexbox 與 Grid，而不是固定的像素寬度。
• 媒體查詢（Media queries）（或 Tailwind 的 md: 等框架類別）會在超過某個寬度時改變版面。
• 彈性媒體：圖片與影片會縮小以符合其容器。

這很重要，因為你的許多流量很可能來自手機，而且 Google 會為頁面的行動版本建立索引。如果內容或連結只存在於桌面版，Google 也可能看不到它們。

選項與取捨

行動優先通常比較簡單：單欄版面最容易處理，而隨著空間變大再增加欄位，比先做多欄再把它們移除來得省力。

通常會出問題的部分

viewport 標籤

如果頁面在手機上看起來像一個縮小的桌面網站，就代表缺少 viewport 標籤：

<meta name="viewport" content="width=device-width, initial-scale=1">

不要加入 maximum-scale=1 或 user-scalable=no。禁止雙指縮放會讓低視力的人更難使用網站。

固定寬度與水平捲動

最常見的響應式錯誤，是某些東西比螢幕還寬：固定 width: 1200px 的容器、寬表格、很長的網址或程式碼區塊，或沒有 max-width: 100% 的圖片。結果整個頁面就會左右捲動。請使用 max-width 取代 width，讓文字自動換行，並讓寬的內容擁有自己的捲動區域。

導覽

桌面版的五個選單連結很少能完整放進手機畫面。常見的做法是使用選單按鈕，點開後顯示面板。請保留兩到三個最重要的操作並一直可見，例如「預約」、「購物車」、「登入」，並確保選單可以用鍵盤操作，而且容易關閉。

文字與可點擊的目標區域

• 在手機上，約 16 px 的內文是合理的最小值。文字較小的輸入框，會讓 iPhone 在點擊時自動放大畫面。
• 讓按鈕與連結容易點中。WCAG 2.2 AA 規定的下限是 24 x 24 CSS 像素（或有足夠的間距）；約 44 像素對拇指來說更舒適。
• 相鄰連結之間要留有空間，避免人們點到錯誤的連結。

表格與資料

寬表格是響應式 App 中最困難的部分。依照偏好順序，可以選擇：在手機上只顯示較少的欄位、把每一列變成卡片，或把表格放進可水平捲動的容器中，並固定第一欄。請依使用者需要比較的內容來選擇。

圖片與媒體

使用 max-width: 100% 與 height: auto，用 srcset 為小螢幕提供較小的檔案，並設定寬度與高度，避免版面跳動。嵌入的影片與地圖需要響應式的包裝元素，才能保持長寬比。較小的圖片也能讓頁面更快，參閱如何加快網站速度。

表單

標籤放在欄位上方，欄位設為全寬，並使用正確的輸入類型（type="email"、type="tel"、inputmode="numeric"），讓手機顯示對應的鍵盤。把送出按鈕放在拇指能夠到的位置，並在鍵盤開啟時保持可見。

只能靠滑鼠懸停的互動

手機沒有懸停操作。只在懸停時出現的提示框、下拉選單與預覽，對觸控用戶來說是看不見的。請讓它們也能透過點擊運作。

有效的提示詞

新建構時，請一開始就說明：

請以行動優先的方式建構。手機上為單欄，平板寬度起為雙欄，桌面為完整版面。在 320 px 寬時不得水平捲動，內文至少 16 px，點擊目標至少 44 px，小螢幕上使用選單按鈕，並且在手機上把表格轉為卡片。

對既有頁面，請描述你看到的情況：

在手機上，/pricing 頁面會左右捲動，三張方案卡片被並排擠壓。請在 768 px 以下將卡片改為垂直堆疊，讓比較表格在自己的容器中水平捲動並固定功能欄位，桌面版版面保持不變。

請在 375 px 寬度下檢查每個頁面。列出所有溢出、重疊、小於 16 px 文字或 44 px 點擊目標，或只能用懸停操作的地方，然後逐一修正。

逐步進行

1. 確認 viewport 標籤已放在頁面的 head 中。
2. 在 320–375 px 寬度下測試，可以使用瀏覽器的裝置模式或手機尺寸預覽。從上到下捲動每個頁面。
3. 先修正水平捲動。 找出太寬的元素；在它被解決之前，其他問題都很難判斷。
4. 整理導覽：選單按鈕，並讓重要操作保持可見。
5. 在每個關鍵流程中檢查文字、點擊目標與表單，例如註冊、搜尋、結帳與聯絡。
6. 處理表格與媒體：卡片或捲動容器，以及響應式圖片與嵌入內容。
7. 檢查中間尺寸。 把寬度從手機慢慢拖到桌面；版面常常在平板寬度附近出問題。
8. 在真實手機上測試。 模擬器會漏掉一些問題，例如螢幕鍵盤遮住按鈕、瀏海，以及網站在行動數據下的載入速度。

常見錯誤

• 只在一種手機尺寸下測試。 請檢查小型手機、大型手機與平板。
• 為了符合版面而在手機上隱藏內容。 Google 會為行動版建立索引，而手機用戶也想要相同的資訊。
• 在 viewport 標籤中禁止縮放。
• 在手機上使用桌面尺寸的圖片，會增加載入時間與流量消耗。
• 固定定位元素堆疊：固定的標頭、Cookie 橫幅與聊天泡泡，可能會遮住半個手機螢幕。
• 在小螢幕上無法關閉的彈出視窗，因為關閉按鈕跑到了畫面外。

行動版檢查清單

• 已有 viewport meta 標籤，且沒有禁止縮放
• 所有頁面在 320 px 寬時都沒有水平捲動
• 內文約 16 px；輸入框不會觸發縮放
• 點擊目標足夠大，且間距充足
• 選單在手機上與鍵盤操作下都能運作
• 表格在手機上可以閱讀（卡片、較少欄位或捲動容器）
• 圖片與嵌入內容會縮放；提供尺寸適當的檔案
• 表單使用正確的輸入類型；送出按鈕可以觸及
• 沒有重要內容依賴懸停操作
• 至少在一部真實手機上測試過

響應式版面也是無障礙的一部分：WCAG 要求內容在 320 px 寬度與 200% 縮放下仍可使用。如果你正在建構人們每天會在手機上使用的 App，如何建立適合行動裝置的網頁應用程式 會進一步說明，包括可安裝的 PWA。

Mythex 上的響應式設計

Mythex 可以建構響應式網頁應用程式，而在 Pro 方案中，還可以把它們包裝成 Android 與 iPhone App。在工作區中，點擊預覽上方的手機圖示（Switch to Mobile），即可在手機尺寸的框架中查看你的 App，並拖曳框架邊緣嘗試其他寬度（預覽與程式碼）。文件中的行動響應式提示詞 提供了修正小螢幕版面的簡短入門提示詞。也請在真實手機上檢查：開啟已發布的網址，或分享預覽連結並在手機上開啟。

常見問題