做的時候・做手機版・免費
改成手機也好看、好按
30 秒懂
現在很多人是用手機打開網站。手機版不是另外做一個網站，而是同一個網站依螢幕寬度自動調整排版，這叫響應式設計。重點是字夠大、按鈕夠大、不用放大縮小就看得清楚。
直接用
填好欄位，提示詞會自動組好，按「複製提示詞」貼給你的 AI 工具。
組好的提示詞
我的網站「阿嬤的古早味滷肉飯」在電腦上看起來正常，但在手機上很難用。請幫我改成手機上也好看、好按，先從這幾頁開始：首頁、菜單、訂位。 請幫我做到： - 用同一套網頁依螢幕寬度自動調整，不要另外做一個手機版網站。 - 手機上的文字夠大，不用放大就看得清楚。 - 按鈕和連結夠大、彼此有間距，手指不會按錯。 - 電腦上並排的區塊，手機上改成上下排列；選單收進一個按鈕裡。 - 不能出現左右滑動的橫向捲軸。 請用窄的手機、一般手機和平板的寬度各檢查一次，電腦版的樣子不要改壞。一次只改排版，不要動功能和文字內容；不確定的地方先問我。完成後列出改了哪些檔案、我要怎麼確認。
這是預覽版，正式上架前會用主流 AI 工具實際測試。提示詞裡不要放密碼或金鑰；需要金鑰的地方，請 AI 改用環境變數。AI 做出來的結果，請照下面的清單自己確認。
怎麼確認 AI 做對了
- 用自己的手機打開每一頁，不放大也能輕鬆看清楚文字。
- 用手指點每個按鈕和連結，看會不會按到旁邊的東西。
- 在手機上左右滑滑看，畫面不應該跟著左右移動。
- 用 Chrome 的開發人員工具切換成手機尺寸，換幾種手機看看。
- 用 PageSpeed Insights 檢查手機版，看看有沒有跟手機相關的提醒。
常見陷阱
- 只把整個畫面縮小，字和按鈕小到看不清楚、按不到。
- 圖片或表格太寬，把畫面撐出左右捲動。
- 改了手機版，電腦版的排版跟著跑掉。
- 只在電腦上把視窗拉窄看過，沒有在真的手機上試。
同一個主題的其他提示詞
- 手機跑版逐一檢查修好通行證
想懂更多
這個主題在看懂軟體：創碼小鎮有完整的說明和練習。
