打破裝置邊界，從模擬卡片到雙端沉浸體驗

在前端開發過程中，我們經常在寬螢幕的桌機上檢視介面，並以一個固定寬高的置中卡片來模擬手機 App。然而，當真實的使用者拿起 iPhone 或 Android 手機開啟網頁時，往往會面臨被瀏覽器網址列遮擋、外層雙重滾動條、或是小尺寸螢幕按鈕被擠壓換行等問題。

今天《喵語日誌》的核心任務是進行全面的 RWD 雙端適配。我們要讓產品在電腦桌面上維持精緻的置中卡片，而在真實手機開啟時，能無縫切換為全螢幕沉浸式操作，消除網頁與原生 App 之間的邊界感。

手機端排版三大痛點與解法

在處理行動端適配時，最容易遇到的三個挑戰分別是動態視窗高度、卡片邊界型態切換以及窄螢幕觸控尺寸。

傳統 CSS 的 100vh 在行動端瀏覽器上容易出問題，因為它會包含動態收合的網址列與下方工具列，導致底部的導覽列或輸入框經常被截斷。為了解決這個問題，我們全面改用現代 CSS 的 100dvh，確保在任何縮放或工具列彈出的狀態下，內容都能剛好填滿可視區域。

在卡片型態方面，手機端與電腦端的需求完全不同。在手機端，我們移除了外層的多餘 padding 與圓角邊框，讓頂部狀態與底部導覽列自然貼齊螢幕邊緣；而在平板與桌面端，則恢復精美的 rounded-3xl 圓角與陰影，保留模擬手機展示的質感。

最後是小尺寸螢幕的細節調校。我們針對小手機（如 iPhone SE）進行了防擠壓處理，將 5 個心情按鈕的間距收斂，並為按鈕文字加上單行防折行設定；日曆的 7 欄日期圓圈也依螢幕寬度微調為彈性尺寸，確保在各種寬度下都不會產生水平溢出。

核心實作：Tailwind CSS 雙端響應式重構

透過 Tailwind CSS 的斷點前綴（sm:），我們不需要撰寫冗長複雜的 Media Query 語法，就能優雅完成手機與桌面端的雙模佈局：

// src/App.tsx 雙端響應式容器設計
export default function App() {
  const [activeTab, setActiveTab] = useState<'chat' | 'chart' | 'awards'>('chat');

  return (
    <div className="min-h-[100dvh] sm:min-h-screen bg-rose-50/30 flex flex-col items-center justify-center p-0 sm:p-4 font-sans selection:bg-rose-100">
      {/* 桌面端頂部標題（手機端隱藏以爭取垂直閱讀空間） */}
      <h1 className="hidden sm:flex text-xl font-bold text-stone-800 mb-4 items-center gap-2 tracking-wide">
        🐾 喵語日誌
      </h1>

      {/* 主容器：手機端滿版 100dvh 直角，桌面端固定 680px 圓角卡片 */}
      <div className="flex h-[100dvh] w-full flex-col overflow-hidden bg-white sm:h-[680px] sm:max-w-md sm:rounded-3xl sm:border sm:border-rose-100/70 sm:shadow-xl sm:shadow-rose-950/5">
        
        {/* 內容分頁區域 */}
        <div key={activeTab} className="flex-1 overflow-hidden flex flex-col animate-in fade-in duration-300">
          {activeTab === 'chat' && <ChatContainer />}
          {activeTab === 'chart' && (
            <div className="flex-1 overflow-y-auto p-3 sm:p-4 flex items-center justify-center">
              <MoodChart />
            </div>
          )}
          {activeTab === 'awards' && <AwardsView />}
        </div>

        {/* 底部導覽列 */}
        <nav className="flex h-16 sm:h-16 w-full items-center justify-around border-t border-rose-100/70 bg-white/95 px-2 pb-1 sm:pb-0 backdrop-blur-sm shrink-0">
          {/* 導覽列按鈕項目 */}
        </nav>
      </div>
    </div>
  );
}

除了最外層的 App.tsx，在 ChatContainer.tsx、MoodCalendar.tsx 以及 AwardsView.tsx 中，我們也全面將原本固定的 padding、文字大小與按鈕尺寸改為 p-3 sm:p-4 與 text-[11px] sm:text-xs 等響應式組合，讓所有元件在不同螢幕比例下皆能保有舒適的留白與觸控面積。

雙端實測成果與對比

▲ 電腦端精緻卡片（上）與手機端滿版沉浸體驗（下）成果對比

在電腦視窗下，《喵語日誌》以溫暖柔和的背景襯托出卡片的層次與立體感；當切換到手機模擬器或實際以手機瀏覽器開啟時，畫面則自然延展至全螢幕，頂部標題、聊天視窗、情緒日曆與底部導覽列皆緊密貼合，操作起來就像原生 App 一樣順手流暢。

這次實作的心得

這次的 RWD 實作讓我深刻體會到，響應式設計並不僅僅是把寬度設定為百分之百那麼簡單，而是要根據使用者的操作情境做出適當的取捨。

桌面端追求的是視覺聚焦與舒服的空間留白，而行動端則更看重螢幕空間的極致利用與防止誤觸。透過動態視窗單位與細緻的斷點微調，我們解決了惱人的邊界遮擋問題，讓《喵語日誌》真正成為一個能跨越不同裝置、隨時隨地療癒使用者的生活小工具。

結語與明日預告

今天順利完成了手機與電腦雙端的 RWD 響應式適配！明天我們將迎來鐵人賽的半程里程碑——【第二週小結】前端靜態畫面全面完工展示！我們將統整《喵語日誌》目前的所有功能模組與 Mock Data，帶來完整的靜態版功能 Demo，並一起回顧這兩週透過 Vibe Coding 協作所帶來的開發效率提升！

明天見，喵～