AI 網頁生成 - 第九篇：手機與桌面版頁面調整

2025年6月25日 AI_Vibe_Coding

前言

當我們用 AI 工具快速生成網站時，通常預覽時畫面看起來「沒問題」。
但當你把網頁拉小、用手機打開，就會發現——
排版錯亂、文字重疊、圖片被切斷……
這些都是因為沒有正確處理「RWD（Responsive Web Design）」的緣故。
本篇我們來說明如何檢查與修正手機版與桌面版的畫面差異，確保你做出的網站在所有裝置上都好用又好看。

為什麼手機版會出錯？

AI 工具生成的畫面，通常只考慮桌面（Desktop）版的尺寸。

但在實際使用時，使用者可能來自：

電腦瀏覽器
平板
智慧型手機（橫的、直的）

如果畫面沒有使用「媒體查詢（Media Queries）」、「百分比寬度」、「彈性排版」等 RWD 技術，那麼在小螢幕裝置上就會出現問題。

檢查手機與桌機的排版差異

你可以透過以下方法來檢查畫面差異：

在電腦 Chrome 中打開開發者工具（按 F12）
點選左上角的「手機圖示」來切換裝置模式
模擬各種尺寸：iPhone SE、iPhone 14、iPad、Desktop
注意是否有：
- 區塊重疊
- 文字溢出
- 圖片未自動縮放
- 按鈕超出畫面
- 隱藏選單無法展開

自動修正方式（可嘗試，但效果有限）

有些 AI 編輯工具或 IDE 擴充（例如 Cursor AI、Windsurf 等）支援自動加上 RWD 對應的 class 或樣式建議，你可以嘗試以下方式：

在專案中輸入指令，例如：

請幫我讓這個區塊在手機上是直排，在桌面上是橫排

這類「自動修正」只能處理比較明確的排版需求，像是：

- Flex 方向切換
- 字體大小調整
- 寬度設定補

更複雜的情況（例如圖片擠壓、空白間距錯誤）仍然需要手動微調

自動修整可能會出現的誤差：
- 畫面外有空白，中間文字超出範圍

按鈕底部觸碰到邊界

儀表板文字未換行，右邊文字超出畫面

右上方按鈕位置錯誤

手動修正方式

你可以對 AI 說： 「我要更改某個按鈕的某的數值，請幫我導向到該按鈕的地方」

通常 AI 會直接帶你到影響數值的那段程式碼前面，或是請 AI 幫你標記可以修改的數值，並幫你註解在程式碼旁。

建議先請 AI：

幫我在程式碼中標記一下可以修改的部分與數值，並幫我註解在程式碼下方

這樣 AI 就會幫我們標記好指示，那我們就可以開始操作。

大致上我們要進行三類調整：

1. 調整版面排版方式（Flex / Grid）

桌面版：可以用 flex-row 或 grid-cols-3

手機版：要改成 flex-col 或 grid-cols-1

可以透過斷點前綴來處理，例如：
<div className="flex flex-col">
這代表在手機（預設）時是直向排版，在 md 以上（桌機）變成橫向。

2. 控制字體大小與間距

桌面版可使用較大的字體與邊距

手機版需減少間距、使用自動換行

範例：
<h1 className="text-xl md:text-3xl mb-2">
3. 圖片與按鈕尺寸的調整

使用 w-full 自動撐滿寬度

記得加上 object-contain 或 object-cover

為圖片容器設 max-w-md 等寬度限制，避免在桌面上拉太長

實作範例：首頁上排文字調整

關於上排文字超出，我們透過 AI 搜尋後，發現這段程式碼存在於 Header.tsx 這份文件裡面。

首先，我們找一下原本上排按鈕的程式碼：
<nav className=" "hidden" items-center space-x-6">
 {/* hidden md:flex 代表小螢幕隱藏，md(768px)以上才顯示。可改成 flex 讓所有裝置都顯示 */}
 {/* space-x-6 控制按鈕間距 */}
</nav>
我們可以發現原本應該顯示的按鈕預設被隱藏起來了。依照 AI 的標記，把 hidden 改成 flex：
<nav className=" "flex" items-center space-x-6">
 {/* hidden md:flex 代表小螢幕隱藏，md(768px)以上才顯示。可改成 flex 讓所有裝置都顯示 */}
 {/* space-x-6 控制按鈕間距 */}
</nav>
這樣子按鈕就跑出來了，接著我們來調整上下位置：
{/* 若想讓主選單 Events/Bands/Dashboard 按鈕在寬度不足時自動換行，請在 className 加上 flex-wrap，例如：hidden md:flex flex-wrap items-center space-x-6 */}
<nav className="flex flex-wrap justify-between md:flex items-center space-x-6">
 {/* space-x-6 控制按鈕間距 */}
 <Link to="/events" className="text-gray-300 hover:text-red-400 transition-colors font-medium">
   Events
 </Link>
</nav>
這邊把 className 的內綴修改一下：
<nav className="w-full flex items-center space-x-6 justify-center">
這樣已經有點樣子出來了，但如果帳號過長，導致登出按鈕超出，可以把登出按鈕也移到下排：
className="flex items-center space-x-1 text-red-500 hover:text-white border border-red-500 hover:bg-red-600 px-3 py-1 rounded transition-colors font-medium "mt-2" "
這邊加入一個換行的指令 mt-2。

這樣就變回來了，不過此時我們回到桌面模式，會發現連桌面模式都一起更改了。

那是因為系統預設的是手機模式，如果要讓桌機模式有不同顯示方式的話，就要加上 md 的前綴，例如：
<div className="w-full "md:w-auto" flex items-center space-x-4">
 {/* space-x-4 控制右側帳號區塊與其他元素的間距 */}
 <Link to="/" className="flex items-center space-x-2 group mx-auto "md:mx-0" ">
   {/* space-x-2 控制LOGO與文字間距 */}
 </Link>
</div>
最後成就是這樣：

結論：修改建議流程

先在桌面上設計好你要的畫面（用 AI 工具）

接著切換到手機模式，逐頁檢查

依據畫面錯誤的地方，針對每一區塊微調 RWD 排版

重複測試不同裝置尺寸，直到一致為止

本篇將會附錄一篇常用的CSS指令集，在調整畫面數值的時候，如果要尋找相關指令，可以參考此指令集