有位學員把用 AI 做的網站傳給朋友看，朋友回一張截圖：標題疊在圖片上、按鈕跑到畫面外。他自己打開，完全正常。他問我：這算誰的問題？是他朋友的手機怪，還是我的網站有問題？

先回答。這是網站的問題。不是因為你的網站寫錯了什麼，而是因為它只在你的環境被測過。

一個網站「在我這裡正常」，代表它在一種螢幕寬度、一個瀏覽器、一個作業系統版本上正常。你朋友的手機是另一組條件。只要有一組條件沒被測過，那裡就可能跑版。

為什麼 AI 做的網站特別容易這樣

AI 幫你做網站時，它「看到」的是程式碼，不是畫面。它會照常見的做法寫出響應式的版面，但它沒有真的在一支 iPhone、一支 Android、一台老舊的 Windows 筆電上打開過。

你呢？你通常只在自己的電腦上看，頂多再用瀏覽器的手機模擬模式看一下。模擬模式跟真機還是有差，字型不同、瀏覽器內建的間距不同、鍵盤跳出來的時候版面會怎麼縮，模擬器都不會告訴你。

所以你做出來的，是一個在你手上正常的 Demo。別人打開的那一刻，它才第一次被當成產品使用。

有人會說：那是他的手機太舊了吧。也許是。但你的客戶裡，有多少人用的就是那支舊手機？你沒辦法要求客戶為了看你的網站換手機，所以只要那是一種客戶會用的裝置，它就是你要處理的環境。

我維護系統這麼多年，很清楚「問題只在特定裝置發生」這件事有多常見。它跟「不同瀏覽器行為不同」一樣，是有人開始真的用之後才會冒出來的。這正是 Demo 跟產品的分界線：Demo 處理的是理想流程，產品處理的是所有例外。

回報問題要帶三個資訊

不管你是自己修，還是要找人看，先把這三個資訊收齊，否則對方也只能猜：

• 裝置和系統：例如 iPhone 15、iOS 版本；或 Windows 筆電、Chrome
• 瀏覽器：Safari、Chrome、LINE 內建瀏覽器、Facebook 內建瀏覽器
• 截圖，最好是整個畫面，包含網址列
• 出問題的是哪一頁、做了什麼動作之後出現的

第二項特別重要。很多「手機跑版」其實是「從 LINE 點開的時候跑版」。LINE 和 Facebook 內建的瀏覽器跟一般 Safari 或 Chrome 不同，這種情況不是手機的問題，是那個內建瀏覽器的問題，而你的網站要為它留餘地。

把每次回報都照這三個資訊記下來，還有一個好處：你會開始看到規律。如果所有跑版的回報都來自 LINE 打開的，你就不用再在 Chrome 上找問題了。

最低限度該測哪幾種

不需要買十支手機。但上線前，至少用真機走過這幾組：

1. 一支 iPhone 的 Safari
2. 一支 Android 的 Chrome
3. 從 LINE 傳連結給自己，用 LINE 內建瀏覽器打開
4. 電腦上把瀏覽器視窗縮到一半寬度

每一組都做同樣的事：滑到底、按每個按鈕、填一次表單。表單在手機上最容易出事，鍵盤一跳出來，送出按鈕常常被擋住。

另一個很常漏的是深色模式。有些手機開了深色模式，你的網站背景是透明的，文字就整片看不見。切換一次看看。

如果你身邊沒有另一種系統的手機，找一位朋友幫你走一次，請他照上面三個資訊回報。

一個常見的誤判

有人看到跑版的截圖，第一反應是丟給 AI 說「手機上跑版了，幫我修」。AI 會改一些寬度設定，你在自己電腦上看沒問題，就回覆朋友「修好了」。朋友再打開，還是一樣。

原因是你還是沒有在出問題的那個環境測。修正之後，一定要在原本出問題的裝置和瀏覽器上再看一次，不然你只是在自己的電腦上又確認了一次原本就正常的東西。

反過來想

「在別人電腦上又正常」這句話，其實已經說明了問題。網站不是給你自己看的，是給別人看的。別人用什麼裝置，你決定不了。

所以真正的問題不是「這算誰的」，而是：你的網站上線前，有沒有在你自己以外的任何一個環境被打開過？

如果你做到一半卡住，可以把狀況寫信給我，記得帶上面那三個資訊。這類上線後才冒出來的問題，我也會持續寫在電子報：https://iamlouis.ai/subscribe/edm