點樣令網站適應手機（響應式設計）

要令網站適應手機，就加入一個 viewport meta 標籤，用手機優先嘅方式建構版面，用彈性闊度，然後用 CSS 斷點喺較大螢幕上重新排列——欄位堆疊、選單收埋、圖片縮放到啱啱好。之後喺手機闊度檢查每個頁面，睇吓有冇橫向捲動、字體太細，或者按鈕太細冇辦法撳。喺 AI 建構嘅網站上，一個清楚嘅提示，加上喺手機尺寸預覽入面檢查一次，通常就可以搞掂大部分問題。

響應式設計其實係咩

響應式網站用一套頁面同網址，去適應螢幕。唔係另外建一個「m.」網站，而係 CSS 喺某啲闊度時改變版面。基本組件包括：

• viewport meta 標籤，話俾手機瀏覽器用裝置嘅真實闊度。
• 流動版面，用百分比、flexbox 同 grid，而唔係固定像素闊度。
• 媒體查詢（或者 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 × 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 係人哋每日都會喺手機上用，點樣建構適合手機嘅網頁 App 會再深入講解，包括可安裝嘅 PWA。

Mythex 嘅響應式設計

Mythex 會建構響應式網頁 App，而喺 Pro 方案下，亦可以將佢包裝成 Android 同 iPhone App。喺工作區，撳預覽上面嘅手機圖示（切換到手機），就可以喺手機尺寸嘅框架入面睇你個 App，亦可以拖動框架邊緣試其他闊度（預覽同程式碼）。文件入面有一個修正細螢幕版面嘅入門提示，見手機響應式提示。亦要喺真實手機上檢查一次——打開已發佈嘅網址，或者分享預覽連結，然後喺手機上打開。

常見問題