選 MacCMS（蘋果 CMS）模板時，只看手機首頁很容易漏掉問題：分類標題能不能讀、長片名會不會擠出畫面、集數按鈕能不能點，往往要進到內容頁才知道。這篇用本站第 50 套模板的橫圖 Demo 作例子，提供可直接開啟的頁面與截圖，讓你跟著檢查，再用同一套方法比較其他模板。
先做這三步：
- 找到首頁、分類列表、內容資訊及播放操作四個檢查區塊；詳情和播放可以在同一頁。
- 在手機寬度下看文字、點入口，等圖片載入後再檢查版面。
- 記下「通過／待釐清／阻擋」和具體位置，有阻擋項就先問清楚再買。
下文截圖取自 2026 年 10 月 1 日的 Demo，手機畫面使用 390 CSS px 瀏覽器模擬。本次觀察了頁面呈現與選集切換，沒有完成真機、聲音或影音連續播放驗收；截圖不是整套模板的合格認證。
先開第 50 套的這幾個頁面
第 50 套商品頁列有橫圖與直圖兩個 Demo。本篇只看橫圖版 wn50.wntheme.com，不把它的觀察結果套到直圖版或其他模板。
- 首頁：Demo 首頁。先找搜尋、分類與圖卡入口。
- 分類：影片分類 1。看分類列、子分類、排序與列表；想測排序，可再開最多播放列表。
- 長標題資訊：演示影片 983。用刻意加長的示範名稱檢查換行。
- 分集操作：演示影片 1979 第 1 集。往下找播放列表，再點第 2 集。
這套 Demo 的首頁圖卡直接進入 /v/... 內容頁，影片資訊、播放器與選集在同一頁。不要因為沒有獨立詳情中轉頁就判定有缺陷；應分別檢查資訊是否完整、播放操作是否可用。第一次開啟可能有公告彈窗，先按「我知道了」關閉，再測頁面入口，並把這個初次訪問步驟記下。
分類頁也值得單獨看。下圖可見分類、子分類、排序與兩欄封面卡片；檢查時可先滑動分類列，再找一張圖卡進入內容頁。排序選項出現，不等於排序結果已正確，仍要點選後比較 URL 和列表。本篇未逐項驗證所有排序與分頁。
刻意挑長標題，不要只用漂亮的示範資料
如果 Demo 全是短標題、同尺寸封面，版面整齊可能只是資料太理想。第 50 套的983 長標題樣本就適合拿來看資訊區：本次 390 CSS px 畫面中，標題會分行，沒有把頁面撐出橫向捲動。這是該樣本在該寬度的觀察，並不代表所有片名和裝置都測過。
測你自己的內容時，也挑一個長片名、多行簡介和多集數樣本。你若主要用直圖，先看直圖與橫圖的選擇判斷，再選相符的 Demo；不要用橫圖案例代替直圖版驗收。截圖時保留頁面 URL、時間和商品版本，避免日後改版後難以對照。
四類檢查乘三個面向：逐項留下結果
下面是買前檢查表。每格記「通過／待釐清／阻擋」，附 URL 和截圖；空白格不等於通過。同一個內容頁可以同時填「內容資訊」與「播放操作」兩列。
| 檢查區塊 | 內容可見 | 操作可達 | 圖片與版面 |
|---|---|---|---|
| 首頁 | 站點內容與重要導覽可辨識 | 搜尋、選單、列表入口能點到 | 圖片載入後不遮住導覽，沒有橫向溢出 |
| 分類列表 | 分類名稱、圖卡標題仍可讀 | 分類、排序與下一頁能用 | 封面比例一致，不把文字擠成單字列 |
| 內容資訊 | 片名、簡介、集數資訊沒有整段消失 | 能找到播放或選集區；合一頁可直接捲到 | 海報不壓住正文，載圖後內容不大幅跳動 |
| 播放操作 | 片名、線路與目前集數可辨識 | 選集、返回與播放器控制可觸及 | 播放器不溢出，廣告不覆蓋核心操作 |
Google 的行動版索引指引要求留意手機版的重要內容、標題、描述與可抓取資源。手機排版可以不同，也可以用摺疊區節省空間；不要為了畫面乾淨，把主要內容整段刪掉。如果某個欄位在手機看不到，先找摺疊入口，再確認是否真的缺失。
用三條路徑檢查，從入口走到下一步
- 找內容：首頁 → 分類 → 內容頁。 在首頁開「影片分類 1」，從分類列表選一張圖卡。看分類列是否容易操作，內容頁標題是否對得上，以及返回入口能否回到原列表。第 50 套可直接進入含播放器的內容頁，不必多走一個不存在的詳情中轉頁。
- 讀資訊並找播放：內容頁 → 資訊／播放區。 開983 長標題頁，檢查長名稱和資訊，再找播放列表。播放器框出現不等於播放成功；控制鍵看得到卻點不到，仍是阻擋項。
- 繼續觀看：第 1 集 → 第 2 集 → 返回。 在1979 第 1 集捲到播放列表，點「第2集」，核對是否進入第 2 集網址，目前集數標記是否同步，再試返回。也要看底部浮層是否蓋住可點區。
本次在關閉公告後點選第 2 集，URL 與頁面標題切換到第 2 集，圖中的第 2 集按鈕也呈粉色。這個結果只代表該樣本的選集入口和目前集數標記切換，不能代替影音播放、聲音或全螢幕驗收。
若 Demo 沒有可合法測試的播放樣本，就先檢查播放器容器、選集與返回路徑，把實際播放列為「未驗證」。要判斷播放是否正常，還需要確認畫面、播放時間、聲音及操作結果；不要只靠黑色播放器框下結論。
Chrome 模擬是第一關，真機才是最後一關
在 Chrome 開啟 Demo，按 F12 打開 DevTools，點裝置工具列圖示進入 Device Mode，在尺寸選單選 Responsive。可從 360、390、430 CSS px 起測，再拖曳寬度找斷點。這是方便比較的起點，並非 Google 的合格標準；只測一個手機預設尺寸容易漏掉中間寬度。MDN 的 media queries 說明可幫你理解不同寬度為何切換佈局。
Chrome 模擬不能證明特定手機的觸控、系統播放器、字體和真實網路都正常。若有真機，再重走三條路徑，碰觸分類、選集和播放器控制；沒有真機時，就記「模擬已測、真機未驗證」。圖片還要等捲動觸發懶載後再看，灰色占位不一定是破圖；封面載入後若讓按鈕明顯跳位，也要留下證據。web.dev 的響應式圖片指引可用來理解尺寸預留，但不能只靠一張截圖確認程式已正確設定。
複製這份記錄，再填每個測試項目
模板名稱／版本：
頁面 URL：
測試時間：
手機及瀏覽器／模擬寬度：
操作步驟：
預期結果：
實際結果：
截圖或錄影：
判定：通過／待釐清／阻擋
以上文選集為例，可記：「第 50 套橫圖 Demo，390 CSS px，從第 1 集點第 2 集；預期 URL 和目前集數同步，實際已進入 /nid/2/ 且第 2 集呈粉色；選集切換通過，影音播放未驗證。」若另一台手機的按鈕被浮層蓋住，就另外記裝置、步驟和阻擋位置，不能用這次的結果代填。
怎樣把結果變成購買決定
某張示範封面比例不一致，可以先問能否由後台設定或換圖解決，並請賣家指出設定位置。若主要文字在手機真的缺失、集數按鈕被浮層蓋住、Demo 版本與商品說明對不上，先暫停購買，等對方提供可驗證的修正或說明。不要把「可以調」當作已修好。
可先從第 50 套商品頁確認目前版本、橫圖／直圖 Demo 和功能說明，再到MacCMS 模板分類找其他候選，按同一表格比較。不確定版本、授權、安裝或手機問題的處理範圍時，附上具體 Demo URL、裝置和截圖，透過聯絡頁詢問。
常見疑問
詳情和播放在同一頁，就少測一項嗎？ 不會。資訊完整性和播放操作是兩種檢查，在同一頁也要分別留下結果。
選集按鈕變色，就表示播放正常嗎？ 只能證明目前集數標記有變；還要檢查 URL、播放畫面、時間和聲音。
Demo 連結打不開，要不要只看商品截圖？ 截圖不能證明導覽與互動。先向賣家確認可用入口與版本，未驗證項目如實保留。
參考資料
- 文尼模板第 50 套商品頁：商品版本與橫圖／直圖 Demo 入口。
- 第 50 套橫圖 Demo：本文具體頁面、示範資料和截圖來源。
- Google：行動版索引最佳做法。
- Chrome DevTools：Device Mode。
- MDN：CSS media queries。
- web.dev：Responsive images。
評論0