RWD 網頁設計拆解：手機版是另一個介面，不是桌機縮小版

先看一個場景（模擬情境）：一位接案設計師替品牌站匯入了 Blocksy 模板，在桌機大螢幕上逐頁檢查，字級、留白、圖片比例都滿意，於是認定響應式這一關已經由主題代勞。直到把手機遞到客人面前，問題一次浮上來：首頁的作品前後對照擠成兩條細縫，預約入口收在選單第二層，客人滑沒兩下就退出，回頭在通訊軟體裡問朋友有沒有推薦。

問題不在模板，在責任的錯置。主題完成的是運輸層：流體格線讓欄位伸縮，媒體查詢讓樣式隨寬度切換，回應式圖片讓瀏覽器自己挑檔案，這些機制讓版面在一般寬度下維持不破；超寬表格或外部嵌入沒設防時，破口還是會出現。但每個斷點上看什麼、藏什麼、按鈕留多大、圖片怎麼送、桌機與手機的資訊是否等價，全部屬於判斷層，沒有工具能替站方決定。會縮放只是及格線，RWD 的真正產物，是同一份內容在每個螢幕上的一份介面決策：手機版是另一個介面，桌機版只是最寬的那個斷點。

判斷也不必靠感覺。找得到、看得懂、點得動，三個訊號各自對應可量測的資料；症狀先分層，訊號定位病因，再依影響力與成本排修復順序。接下來照這個次序拆解：物理、版面、導覽、內容、資源、索引、驗收，收在工具的邊界。

快速重點：RWD 的成品不是一個會縮小的版面，而是同一份內容在每個螢幕上的介面決策。Blocksy 給你逐裝置的開關與前提，內容取捨、圖片輸送、觸控大小與兩端等價，仍要自己逐一驗收。

會縮放，不等於響應式：RWD 的運輸層與判斷層

套上 Blocksy、匯入示範頁，手機上看起來也正常，多數人到這裡就認定 RWD 完工。誤解出在名稱：主題宣稱的響應式，指的是格線會伸縮、版面不會破，與「手機上可用、可預約」是兩件事。運輸層的機制一段話就能帶完，流體格線負責欄寬跟著視窗伸縮，媒體查詢負責樣式隨寬度切換，回應式圖片負責給瀏覽器一組可挑的尺寸，這一層主題確實代勞了。

判斷層就沒有這種代勞。首頁在手機上先給招牌作品或先給服務說明，作品牆開幾欄，聯絡入口放頁首或頁尾，圖片先送哪一張，這些取捨沒有標準答案，因為它們取決於你的內容與客人。判斷層也不必憑直覺，它有儀表：找得到，指分類入口與重要頁面在每個斷點都到得了；看得懂，指作品縮圖在實際寬度下仍辨識得出手法、文字仍讀得清楚；點得動，指觸控目標夠大、表單填得完。三個訊號都對得到數據，入口難找對應 GA4 的頁面瀏覽與事件紀錄，表單中斷對得到開始與完成事件的落差，裝置比對報表則顯示問題集中在哪一端。

用開場的情境套一次這套分層。對照圖擠成兩條細縫，是內容層的症狀：桌機上左右並排的比對，到手機寬度失去可比性，對應的訊號是看得懂沒過。預約入口藏在第二層，是導覽層的症狀：入口存在但路徑太深，對應的訊號是找得到亮紅燈。兩個症狀的修法完全不同，前者要改作品的呈現方式，後者要改頁首與選單配置；不分層就動手，常把版面重排當萬靈藥，改了半天，真正的病因原封不動。

兩層的分工可以用一句話自查：這件事出錯時，改設定就能修好，還是要動內容？格線在某個寬度崩掉、圖片沒有產出小尺寸，屬於前者，翻主題文件或調外掛設定多半有解；客人看不懂作品在比什麼、找不到預約入口，屬於後者，文件幫不了你，因為答案在你的內容與客人身上。把力氣花對層，是整個流程裡最省時間的一步，也是最常被跳過的一步。

驗收的順序也就此固定：先分兩層檢查，運輸層看破版與圖片尺寸有沒有送對，判斷層看三個訊號的數據，兩層都過，響應式三個字才成立。觀念的完整推導，可以回頭讀響應式網頁設計的根本邏輯；接下來各節談的，全是判斷層的實體。

手指沒有 hover：逼你重編手機版的三個物理限制

同一份內容到了手機必須重新編輯，原因不在美觀，在物理。三個限制擋在中間：觸控沒有 hover，指腹面積遠大於游標尖端，單手操作讓注意力集中在拇指搆得到的範圍。桌機介面的互動假設，在這三件事上全部失效。

先談 hover。桌機選單往往在指標停留時展開第二層，圖片靠懸停顯示說明，提示文字靠游標停留才浮現；手機上這個事件不存在，所有「移上去才出現」的資訊，等於被鎖進沒有鑰匙的櫃子。改法只有一個方向：改成點按才展開，或者把資訊直接攤在畫面上。作品名稱與服務說明屬於後者，直接放在圖旁；折疊選單屬於前者，點一下才打開。判斷的標準是資訊的重要程度，愈重要的內容，愈該直接可見。

↔ 左右捲動檢視完整表格

桌機的互動假設	手機上的事實	對應改法
滑過展開第二層選單	沒有滑過這個事件	點一下展開，或攤平成單層
懸停圖片顯示作品說明	說明永遠不出現	說明直接放在圖片下方
游標尖端點小圖示	指腹按壓涵蓋一大片	放大目標並拉開間距
重要操作放畫面右上角	拇指搆不到頂端角落	關鍵入口往螢幕下半部移

目標大小是第二個限制。觸控目標的大小有規範可依，WCAG 2.2 的 Target Size (Minimum) 在 AA 等級通常要求至少 24×24 CSS 像素，並設有間距、等效目標與行內連結等例外；44×44 CSS 像素屬於 AAA 等級的進階目標。預約、關閉選單這類關鍵操作可以朝較大的值設計，再以真實手指驗證；剛好壓在最低線時，例外條件要真的成立才算數。Blocksy 容許你調整按鈕與選單之間的間距，但樣式面板顯示的尺寸不等於實際點擊區域，最終仍要以實機點按的結果為準。

間距與面積是兩個槓桿，可以分開調。面積不夠、又不能放大視覺元件時，把可點擊範圍用留白撐開，相鄰的兩個連結中間至少隔出一段空白，誤觸的機會就跟著下降；同一個目的有好幾個入口時，讓任何一個達標就算過關，這正是等效目標例外的本意。驗收時用實機連點一輪，統計誤觸次數，比目測按鈕大小可靠。

拇指熱區是第三個限制。單手拿手機時，拇指自然搆得到的範圍落在螢幕下半部，頂端兩側最費力。這解釋了重要操作為什麼常往底部放：輸入框在下面、結帳按鈕在下面，都是順著手的結構。可點擊性從來是設計基本盤的一環，屬於一份網站該有的基本元素盤點裡的骨架項目，與配色、字級同一層級，不是妝點。

斷點跟著內容走，不跟著裝置型號走

斷點常被當成背誦題：抄 768、抄 1024，抄完收工。數字本身沒有錯，錯在順序。斷點是內容事件，與裝置型號無關；同樣寬度的螢幕，文字為主的服務頁和圖片滿版的作品頁，開始擁擠的寬度不同，該切換的位置就不同。

內容先行的做法是：把真實的作品圖與文案放進頁面，在瀏覽器逐步縮放寬度，看哪個寬度開始欄位擁擠、誤觸相鄰項目、標題換行換到失控，把這些寬度記下來，再回頭對到主題的控制項。Blocksy 在自訂器裡把回應式控制拆成手機與平板兩組，欄位數、字級、間距都能逐裝置調整。設計端先跑一輪也行，設計稿階段的斷點草案先畫出各寬度的重排方式，回後台對照數值即可。順序是先找出內容的臨界點，再讓工具承接，不是拿工具的預設值反推內容。

找出的臨界點要留下紀錄。每個臨界寬度旁邊註明當時出問題的頁面與症狀，下次改版才有得對照；對回 Blocksy 的控制項時，動一項記一項，別一口氣同時調欄位數、字級與間距，調完反而看不出是哪一項發揮作用。斷點工作看起來瑣碎，實際上最能讓調版面這件事從憑感覺換成照紀錄。

欄位塌陷是最常見的應用：作品牆在桌機開三欄，平板收成兩欄，手機收成單欄直滑。機制通用，數值仍要自己驗，塌下去的不只欄數，還有每張圖分到的寬度與圖說行數；有些版面在兩欄反而比單欄清楚，取捨標準回到看得懂的訊號，用實際作品縮放看過再定。經營購物的站還要沿結帳動線再檢查一次，購物車流程的響應式做法把商品頁、購物車、結帳表單的逐段驗法整理成另一套順序，欄位塌陷在那些頁面直接影響的是下單，不只是好看。

版面收的不只欄位。側欄在桌機放分類篩選與熱門標籤，到手機多半收成頁面頂端的一列按鈕或整塊往下沉，位置換了，功能要在；正文字級與行長也隨寬度變化，同一篇文章在寬螢幕一行三十幾個字，到手機若還維持多欄窄欄，一行剩幾個字，讀起來斷句斷得零碎。中文正文在手機上以單欄、一行十幾個字的節奏最常見，這也是欄位塌陷幾乎總是收往單欄的原因。

受眾裝置的想像也先放一邊。客人用什麼手機，分析資料會告訴你，輪不到猜測；熱門機型是驗收樣本，拿來覆查，卻不是設計的出發點。斷點的責任是讓內容在任何寬度都成立，把這句話記住，就不會再問「平板要不要專門做一版」這種問題：先看內容在平板寬度下發生什麼事，再決定要不要調。

頁首是兩份作業：逐裝置頁首與它各自的前提

頁首是全站每頁都出現的介面，也是桌機與手機差異最大的介面。把它當一份設定交代過去，等於用桌機的答案回答手機的題目。答覆很直接：桌機頁首與手機頁首是兩份作業，各自編排、各自驗收；開關由主題供給，擺什麼、多大、要不要常駐，是站方的編輯決策。

Blocksy 的 Header Builder 把頁首分成兩份作業：桌機頁首與手機頁首各自編排，桌機那一排放完整選單，手機那一排放 Logo、精簡選單與預約按鈕，互不干涉。手機導覽由 Trigger 觸發，點按後開啟 Off Canvas 側滑區域，次要連結與聯絡資訊都能收在裡面。若要頁首在捲動時固定不動，前提是先安裝並啟用 Blocksy Companion。

手機頁首的每個欄位對應到畫面上的哪個元素，官方教學影片有完整示範：Creative Themes 的教學內容逐步演示手機頁首編排、選單觸發器與 off-canvas 區域的設定方式，照著看一遍，後台的控制項就有了對照組。示範環境畢竟是乾淨站，你的內容、外掛與版本組合，要自己在實機上再驗一次。

固定頁首是獨立的開關，也有自己的文件：Blocksy 官方說明把 Sticky Header 列為需要 Companion 的功能，啟用後可以分裝置控制，讓桌機常駐、手機不常駐，或反過來設定。要不要常駐是取捨：頁首一直佔著手機上半部，作品與表單的可視面積就跟著少一截，先開再測，別預設開了就好。

預約按鈕本身別複雜化：頁首按鈕連到表單頁或頁內錨點，文案寫動作，例如預約、詢問，別寫抽象口號。手機上它與選單觸發器並排，兩者擠在同一排時，按鈕要一眼能分出來，顏色或底色的差異比字級差異有效；這也是頁首要逐裝置檢查的原因，同一排元件到了手機寬度會換行、會壓縮，桌機上看起來剛好的間距，到手機常常失效。

留在 WordPress 生態做這件事是務實的選擇，依 W3Techs 的統計，WordPress 長期是全球使用最廣的內容管理系統，文件、外掛與維護人力都好找。主題的安裝與啟用，照安裝 WordPress 佈景主題的步驟走一遍即可；Blocksy 與其他候選的橫向差異，可對照主流 WordPress 佈景主題的評比再決定。判斷點在於你要的是主題層級的導覽與版面控制，還是頁面編輯器的自由排版，兩者常要搭配，並非二選一。

手機頁首的驗收，照五個問題走一遍：

1. 預約或聯絡入口放在第幾層？理想是第一層就看得到，點一下就到。
2. 入口落在拇指容易搆到的範圍嗎？頂端兩側是最費力的位置。
3. 往下滑之後，入口還在嗎？不在的話，頁尾要有遞補。
4. 常駐頁首遮住了多少內容？被遮的面積要與帶來的便利一起算。
5. 平板呢？平板呈現要在實際寬度檢查，別用桌機設定推論。

頁尾是手機的第二個頁首。使用者一路滑到頁底，正是看完作品、最可能詢問的位置，把聯絡管道、營業時段與回到頂部的連結放進頁尾，等於在動線的出口補上入口；桌機頁尾可以從容放完整資訊，手機頁尾要挑過，什麼都放等於什麼都沒放。頁尾在 Blocksy 裡與頁首同一套編排邏輯，桌機與手機分開設定，別讓它沿用桌機的欄數硬擠。

桌機選單與手機選單要分開驗：桌機展開完整分類，空間夠，要讓人願意逛、逛得久；手機版要短，次要分類收進側滑區，聯絡與預約留在第一眼。兩份選單能不同步到什麼程度，索引層的等價紅線會劃出界線，這裡先記住一句：外觀不同步是編輯自由，重要入口不同步是驗收失敗。

從心動到預約：作品牆與聯絡入口的重排

作品集頁面到了 6 吋螢幕，先判讀再決定。判讀的動作很具體：把真實作品圖放到目標寬度，檢查縮圖還認不認得出手法細節、材質與色澤；前後對照圖在窄畫面上還比不比得出差異。欄數與對照方式都是測完才決定的事，版型挑好只完成了一半。

對照圖是重災區。桌機左右並排，到了手機各自只剩半幅，比對感盡失；改成上下疊放，閱讀順序從左右變先後，多半仍可讀；要保留同框比對，就得加滑動比對的區塊外掛，這是功能選擇，主題並未內建。細節可見性優先於一屏塞進的數量，單欄或雙欄都只是手段，停留時間有沒有變長要看數據，別把版型當結論。

兩個情境對照著看（皆為模擬）。接案攝影工作室單價高、決策期長，客人會反覆看單一作品與拍攝條件，作品單頁的資訊卡（地點、時長、方案範圍）值得放在圖片正下方，預約按鈕隨資訊卡出現。社區美甲單價低、決策快，客人掃的是整體手感與款式齊全度，縮圖清晰度與滑動順暢度優先，資訊卡可以精簡成一行字。同一套重排邏輯，優先序因商業模式而不同，這正是判斷層的意義：工具給欄位，順序站方自己排。

作品單頁的資訊卡有個通用的順序：作品圖先講話，接著一句話說明這是什麼服務，再來才是條件與價格區間，行動按鈕收在結尾。順序的邏輯是先讓人判斷喜不喜歡，再讓人判斷劃不划算；把價格放在圖片之前，等於在心動之前先給人抗拒的理由。資訊卡在桌機可以排在圖片旁邊，手機上收成圖片下方的一個區塊，內容相同，順序不變。

各聯絡管道有各自的性格，排序前先想清楚。即時訊息快，但要求有人守著；電話直接，但佔用人力，也不留下文字紀錄；表單慢，卻能把需求一次收齊，方便排班回覆。三種都放，代表三種承諾，守不住的那種寧可不放；放了沒人回，傷害比不放更大，客人被忽略一次，下次就直接去搜尋下一家。

聯絡入口的重排服務同一件事：看到就能問。表單只問安排服務需要的欄位，先用你自己的手機完整填一次，鍵盤彈出的那一刻最誠實；聯絡方式的排序依團隊回覆能力決定，能即時回的管道排前面，並把回覆時間寫清楚，客人的耐心取決於預期而非你的善意。行動呼籲按鈕的設計原則談按鈕文案與位置的判斷，作品集網站的規劃要點與WordPress 預約網站的組法把上下游的整地工作各自展開。底部常駐的快捷列不在主題內建範圍，要用區塊自行組出來並實測遮蔽與誤觸，別把它當成勾了就有的功能。

輸送帶上的圖片與字型：多尺寸、延遲載入與不能 lazy 的那張圖

圖片與字型是跨裝置輸送裡最重的兩項，策略天生對裝置不對等：同一張作品圖，桌機要大檔求銳利，手機要小檔求快速。這一層最常被「主題會處理」一句話帶過去。動手前先量測，找出首屏的 LCP 元素是哪一個，作品集網站通常是 Hero 作品圖，再依實際顯示尺寸輸出與壓縮。

延遲載入有一條明確紅線。web.dev 在優化 LCP 的文件中寫明：先量測找出實際的首屏 LCP 元素，不要對它套用延遲載入，載入時機被推後，最大的內容就愈晚被畫出來；適合延遲載入的對象，是視窗外、使用者還沒滑到的作品圖。作品集的首屏 LCP 常是 Hero 作品圖，先量再動手，別把全部圖片一律掛上 lazy。

速度為什麼值得這樣計較，證據很直接：頁面載入時間與訪客停留的關聯，在 web.dev 上的研究有整理，載入愈久，訪客離開的機率愈高，幅度依各站真實使用者資料而定。作品集的處境更尖銳：客人等不到那張代表作，你的實力就等於沒有展示過。

多尺寸輸送的機制要整套成立。WordPress 的回應式圖片會在 HTML 裡列出多個尺寸讓瀏覽器挑，前提是伺服器端真的產出那些檔案，上傳前把圖壓好，比仰賴前端補救有效。寬高屬性每張都要設，瀏覽器才能預留版位，圖片載入完成後不會把文字推下去；版面跳動對滑動中的手機使用者特別傷。指標與排名的關聯、圖片壓縮與命名的細節，分別在Core Web Vitals 與排名的關聯與圖片 SEO 的處理細節展開。

作品牆還有兩個小處理，成本低而感受明顯。比例統一：同一面牆的縮圖裁成相同比例，版面整齊，滑動的節奏才穩；載入中的佔位：讓圖片載入前就保有正確的版位高度，避免整面牆在載入過程反覆重排。這兩件事都屬於運輸層的收尾，卻直接決定使用者對網站順不順手的觀感，值得在上線前一次做完。

字型的份額常被忘記。中文字型檔案大，從第三方主機載入多一次往返；把字型裝回自己主機的做法，在把 Google 字型裝回自己主機有完整設定。但本機化不等於自動變快，字重數量、子集化與快取都影響結果，改完要把載入時間與 LCP 再量一次，數據沒有改善就退回原設定，別為了本機化而本機化。

字型與圖片的預算要一起看。字型載入慢，文字會晚出現，或先以備用字型呈現再跳換，兩種都傷閱讀節奏；作品集的字型需求通常不多，標題一款、內文一款就夠，字重也只留實際用到的。把這些項目減下來，比追逐任何單一外掛的速度宣稱都實在。

搜尋引擎主要看哪一版？手機版

檢索器主要看哪一版？手機版。Google 的行動優先索引已在 2023 年 10 月全面到位，檢索與評估主要依智慧型手機代理程式抓到的內容進行，見 Google Search Central 的公告。這件事不是額外的加分條件，而是規則本身：桌機版有、手機版沒有的主要內容與連結，能被理解與走到的資訊就少一份。

單一網址是這條規則下的自然選擇。桌機與手機共用同一個頁面網址，檢索器抓一次就是全部，不必維護另一個行動版網域，也不必處理兩份內容的同步；響應式設計在索引層的優勢就在這裡，代價是前面各節的判斷工作都得做扎實，因為沒有第二個版本可以躲。

兩端等價因此是紅線。呈現可以不同：桌機用下拉選單，手機用側滑選單，外觀天差地遠沒有關係；內容不能缺席：作品分類、聯絡路徑、定價或服務說明、重要連結，在手機版都要有可到達的路徑。檢查的方法很土卻有效：把桌機版選單裡的每個入口列成清單，逐項在手機上找一遍，找到的畫勾，找不到的就是缺口。

等價不是逐字相同。桌機的分類選單可以寫全名，手機側滑選單縮短文字；桌機的表格在手機改成分段卡片；同一份資訊換一種呈現，檢索器讀到的內容沒有少，就沒有缺漏。真正的缺漏長得不一樣：分類只在桌機下拉裡出現、價格只在桌機表格的某一欄、聯絡電話只在桌機頁尾，這些設計會讓手機訪客與檢索器同時撞牆。

收合的內容也別存僥倖。側滑選單、折疊區塊裡的文字，檢索器讀得到，訪客卻要多點一下才看得到；把重要的服務說明或分類介紹藏在折疊裡，等於自願把它排到次要位置。收合格式的正確用途是收納細節，重要內容的第一份呈現，放在展開即可見的地方。

等價檢查正是「找得到」訊號在索引層的延伸：人找不到的入口，檢索器多半也繞不過去，兩者共用同一份修復清單。作品集的基本 SEO 工事，替代文字、網站地圖、依頁面可見內容標記的結構化資料，原則相同：描述真實存在的內容，送出真實存在的網址；這些動作幫助理解與發現，至於版位與排序，沒有人能預先承諾。

三種驗收工具，抓三種不同的病

驗收工具不只一種，抓的病也不同，輪著用才叫驗收。桌機瀏覽器的響應模式，拖寬度就能看到版面變化，適合快速找出破版與擁擠的臨界寬度；自己的手機能驗證真實的觸控、字體渲染與捲動手感；借來的中階手機專抓效能破口。三者互補，通過標準以實機體驗為準，任何單次分數都代表不了所有裝置。

↔ 左右捲動檢視完整表格

工具	擅長抓的病	限制
瀏覽器響應模式	破版寬度、欄位擁擠、換行失控	觸控與渲染是模擬的
自己的手機	觸控、字體、捲動、鍵盤輸入	樣本只有一種裝置等級
借來的中階手機	載入卡頓、滑動掉幀	需借用並還原測試環境

響應模式的走法也講紀律：別只拖到一個寬度就停，手機直向、手機橫向、平板直向各停一輪，每停一次就檢查該寬度下的選單、作品牆與表單三個位置。橫向常是漏網的那格：高度變矮，常駐頁首佔掉的比例放大，鍵盤彈出後的表單也最容易在這個姿態露出破綻。

中階手機是必要樣本。旗艦機上滑作品牆順暢，換到客人手裡那台用了幾年的中階機就未必跟得上；作品集圖片一多，運算與記憶體吃緊時，滑動開始卡頓、圖片停在半載入狀態。借一台等級平凡的機種實際滑一輪，把卡住的那一刻記下來，那是圖片過重或動效該收斂的警訊，這類破口只會在等級較低的裝置上現形。

驗收要有固定動線：首頁、作品列表、單一作品、預約或聯絡，四條路各走一次，走的人把手機當客人用，卡住的瞬間當場記下頁面與操作，修復後同路線再走一遍，前後比較。量測的紀律比工具重要：修復前後用聯絡點擊、表單開始與完成這類事件對照，一次只修一層，多項同修，改善與惡化會互相抵銷，歸因就失效；跨裝置的行為差異要列為干擾變數，比較放在同裝置內進行，手機與桌機的訪客組成本來就不同。

記錄的格式固定下來，問題才會浮出規律：頁面、寬度、裝置、症狀、猜測的病因，五個欄位就夠。同一個症狀在三個寬度都出現，通常是版面規則的問題；只在一台裝置出現，方向就往效能與相容性去找。修復後複測同一條動線，把事件數據拉出來前後對照，畫面上的感覺與數據的走向要一致，不一致時以數據回頭檢查感覺，別只挑順眼的看。

上線之後，這套流程會自己長出回饋。事件數據累積一段時間，哪個入口被點、表單在哪一步斷掉，會指出下一輪該修的層；修完再量，形成循環。RWD 的驗收從來不是一次性的打勾，它隨著作品變多、裝置汰換而持續，把它當成經營網站的固定節奏，比當成專案的結案項目更貼近實情。

主題的盡頭：修復、重建與自適應的分野

拆到這裡，剩下收尾的一個問題：Blocksy 到底替你完成了多少？主題供給的是開關、版型與前提，免費核心與 Companion 的邊界、付費方案的功能範圍，文件都寫得清楚；內容決策、資源工作量與驗收，永遠在站方手上。問題確定之後該修還是該換，先過三道關卡。

↔ 左右捲動檢視完整表格

關卡	留在原主題的理由	考慮重建的理由
病因層級	出在內容與設定層，調整即可見效	出在結構層，版型難以承載
逐裝置支援	頁首與欄位可分裝置控制	關鍵控制無法分開設定
維護能力	團隊能長期操作與更新	流程超出團隊負荷

三關都偏向修，就排優先序動手。高影響而低成本的先做：頁首入口重排、首屏圖片輸出，多半半天內有得比較；高影響而高成本的排程處理：作品牆全面重排、對照圖格式改版，屬於數日級的工作；低影響的項目先凍結，力氣留給看得到訊號變化的地方。Blocksy 屬於修得動的那一側，前提是接受以 Gutenberg 區塊組頁面的工作方式；真要換，把這份判斷帶過去，換主題解決不了判斷層的欠帳。

還有一種債要清：示範內容的殘留。匯入模板上線的站，常留著佔位文案、示範分類與沒換掉的圖，它們在後台看得到、卻沒有人再從手機前端點一遍；這些內容佔著導覽層與索引層的位置，訪客點進去是空頁面，檢索器讀到的是沒有資訊的字。清這種債不需要技術，需要的是把幾條動線完整走一遍的耐心，走完通常就知道哪些該刪、哪些該補。

維護節奏也該寫進計畫。主題與外掛更新前先備份，更新後把四條驗收動線走一遍，因為更新最常改掉的正是頁首與版面的預設值；作品集會長大，每加一批作品，就抽一兩個作品頁在新一點與舊一點的手機上重看一次。這些動作花不了多少時間，卻能讓「上次明明還正常」這句話從討論裡消失。

有些訊號代表該找外部協助了：需要改主題程式、需要主機層的效能調整、需要資訊架構重建，這三類工作超出設定與內容的範圍，自查的報酬率會快速下降。找人時帶著症狀清單、數據與已嘗試過的修法，溝通成本最低；評估對象時，聽他問的問題落在運輸層還是判斷層，上來就建議整個重做的，先停一下，把要修的範圍對準再談。

邊界的盡頭是觀念題：RWD 是同一個網址、同一份內容，隨螢幕寬度伸縮呈現；自適應可以依情境供給不同版本，各有代價與適用場景，自適應與響應式的差異解析另文對照。把判斷層外包給工具，正是多數破口的起點；把手機版當另一個介面逐項編輯，把桌機版當最寬的那個斷點來驗收，兩層都過，RWD 才真正成立。