Day 7｜測試手機版並改善空白畫面 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0

Day 7｜測試手機版並改善空白畫面

電影與遊戲收藏清單

ppppp123 2026-10-24 21:01:04 ‧ 40 瀏覽

分享至

Day 6 已加入響應式網格，今天要實際驗證並改善使用體驗。
步驟 1：使用瀏覽器開發者工具

開啟網站。
按 F12。
點選裝置工具列，或按 Ctrl + Shift + M。
選擇手機尺寸。
分別測試首頁、電影頁與遊戲頁。
檢查以下問題：

導覽列是否超出畫面。
卡片是否互相重疊。
標題是否過長。
按鈕是否容易點擊。
步驟 2：改善空白收藏頁
Day 6 的模板已經使用 {% else %} 處理空清單。如果想讓空白畫面更清楚，可以把：

替換為：

再於 CSS 加入：
.empty-state {
text-align: center;
padding: 40px 20px;
}

步驟 3：驗收

在手機寬度下卡片應變成單欄。
在中型螢幕下卡片應變成兩欄。
在寬螢幕下卡片應變成三欄。
沒有作品時應顯示友善提示。

熱門推薦

{{ item.subject }}

{{ item.channelVendor }} | {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

929 組

團體組數

32 組

累計文章數

20304 篇

完賽人數

534 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 18th鐵人賽 17th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css

IT邦幫忙