你的 Vibe Coding 網站在手機上好用嗎？RWD 檢查與修法
台灣人幾乎都用手機看網站，字太小、按鈕擠、要橫向捲？教你怎麼在手機上自我檢查，並用一句話請 AI 修好響應式，體驗與 SEO 一起加分。
你在電腦上把網站做得美美的，但你的客人九成是用手機看的。如果一到手機就字小到要瞇眼、按鈕擠成一團、還要左右捲動才看得完——再好的內容也留不住人。台灣人用手機的比例極高，手機體驗不只影響觀感，也影響生意和 Google 排名(Google 是以手機版為主來評估的)。這篇教你怎麼檢查、怎麼請 AI 修。
先認識一個詞:RWD(響應式)
RWD(Responsive Web Design，響應式網頁設計)的意思是:同一個網站，會依照螢幕大小自動調整版面——在電腦上是寬版、在手機上自動變成適合單手滑的窄版。現在的 AI 做網站多半預設就會做 RWD，但常常做得不夠好，需要你抓出問題、請它修。
手機上最常見的六個問題
- 字太小:電腦上剛好，手機上小到看不清。
- 按鈕太擠或太小:手指點不準、常誤觸旁邊的。
- 要橫向捲動:內容超出螢幕寬度，得左右滑，體驗很差。
- 圖片爆版:圖片沒縮好，撐破版面或蓋住文字。
- 彈窗/選單擋住內容:在小螢幕上蓋掉半個畫面又難關閉。
- 表單難填:欄位太小、鍵盤跳出來擋住送出鍵。
怎麼自己檢查(不用工具)
最直接的方法:拿你自己的手機打開網站，從頭到尾用一遍——首頁、每個主要頁面、表單、下單流程。刻意用「單手、只用大拇指」操作，模擬真實使用情境。哪裡要放大才看得到、哪裡點不準、哪裡要橫向滑，就是要修的地方。
進階一點，可以在電腦瀏覽器裡用「開發者工具」切換成手機尺寸預覽(請 AI 教你怎麼開)，但最準的還是拿真手機測。
怎麼請 AI 修
把你發現的問題具體講出來，貼給 Cursor、Lovable 或 Bolt:
幫我檢查並修正網站在手機上的體驗:確保不用橫向捲動、內文字級在手機上夠大好讀、按鈕夠大且間距足夠好點、圖片會自動縮放不爆版、表單欄位在手機上好填。以手機優先(mobile-first)的方式調整。
修完後，再拿手機實際走一遍確認。
幾個手機體驗的加分細節
- 按鈕要夠大:手指不是滑鼠，重要按鈕大一點、彼此留間距，減少誤觸。
- 重要資訊放前面:手機螢幕小，把最關鍵的內容和行動按鈕放在一眼看得到的地方。
- 少用滑鼠才有的效果:像「滑鼠移上去才出現」的選單，在手機上根本觸發不了，要有替代做法。
- 順便顧速度:手機常在行動網路下，網站要輕要快(看 網站速度優化)。圖片壓好、少載沒用的東西。
- 想更像 App:如果手機是主要使用場景，還能把網站做成 PWA、加到主畫面，體驗更接近原生 App。
常見問題
Q:AI 不是自動就會做手機版嗎?為什麼還要修? 它預設會做響應式，但常常「能用但不好用」——字級、按鈕大小、間距這些細節要你實際在手機上測、再請它調。自動做出來的當起點，人工微調做到好。
Q:我沒有很多裝置，只有一支手機夠測嗎? 一支自己的手機就能抓出大部分問題。行有餘力再借朋友不同廠牌/尺寸的手機看看。iPhone 和 Android 偶爾有小差異，但主要問題通常兩邊都會出現。
Q:手機版和電腦版要各做一次嗎? 不用。RWD 的重點就是「同一份網站自動適應不同螢幕」，不是做兩個網站。你只要確保它在手機和電腦上都好用即可。
Q:手機體驗跟 SEO 真的有關? 非常有關。Google 主要看你的手機版來評估與排名，手機體驗差會直接影響 收錄與排名。修好手機版，使用者和搜尋引擎都買單。
你的客人在手機上，網站就得為手機而生。拿起手機把自己的網站走一遍，把卡住的地方請 AI 修好 → 搭配 網站速度優化 →、讓 Google 找到你 →，或回 挑個 Prompt 開始 →。