在完成核心功能、雲端資料庫串接與 Skeleton UI 美化後，《喵語日誌》已經具備了對外發布的完整雛形。然而，在桌面開發者工具模擬的「完美環境」中運作順暢，並不代表在真實使用者的不同手機與瀏覽器上也能有一致的體驗。

今天我們正式走出 Localhost，把 Vercel 正式上線網址分享給朋友進行跨平台實機測試，並根據第一手的真實反饋與操作盲點進行敏捷調優！

跨平台實機測試與使用者第一手回饋

本次測試涵蓋了主流的 iOS（iPhone Safari）與 Android（Chrome / 內建瀏覽器）雙平台環境。

1. 令人驚豔的正面回饋

• 多模態視覺辨識非常精準： 朋友上傳了一張貓咪照片並寫下「超可愛貓貓跟你分享」，Gemini 不僅辨識出貓咪正在貓爬架上理毛，甚至精準讀出領巾上的「奶精」字樣，並給予極具沉浸感的貓咪擬人口吻互動。
  

• 情感陪伴價值高： 測試者回饋「AI 的文字非常治癒、溫馨，很有陪伴感」，且成就解鎖彈窗（初來乍到 🐾）在發送第一則訊息時能帶來顯著的正向情緒激勵。
  

2. 真實操作中發現的體驗痛點與邊界情況

在測試過程中，我們也蒐集到了兩個關鍵的改進點：

• iOS Safari 鍵盤彈起時的「自動強制縮放」破版： 在 iPhone 上點擊文字輸入框時，畫面瞬間被放大，導致右側的發送按鈕被擠出螢幕視窗外。
  

• 分頁切換時的對話狀態持久化疑問： 使用者提出「切換到情緒分析或成就頁面再切回來，剛剛的對話紀錄會不會重置？」

行動端體驗調優與踩坑修復

1. 破解 iOS Safari 小於 16px 字體強制縮放機制

在 iOS Safari 中，為了防止文字過小導致閱讀困難，系統預設：只要 <input> 或 <textarea> 的 font-size 小於 16px，聚焦時就會強制觸發全頁自動放大。

在先前的設計中，輸入框樣式採用了 text-xs sm:text-sm（約 12px～14px），這直接導致了 iPhone 虛擬鍵盤彈起時畫面橫向破版、發送按鈕消失。

解法實作：

• Tailwind 響應式字體基準： 將手機端輸入框字體設定為 text-base（16px），桌面端才縮小為 sm:text-sm。

• Viewport Meta 雙重防護： 在 在 index.html 的 viewport 宣告中加入 user-scalable=no 與 viewport-fit=cover。

<!-- index.html -->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>

// src/components/ChatContainer.tsx
<input
  type="text"
  value={input}
  disabled={isLoading}
  onChange={(e) => setInput(e.target.value)}
  onKeyDown={handleKeyDown}
  placeholder={isLoading ? "貓咪正在回覆中，請稍候..." : "跟喵喵說點什麼吧…"}
  className="flex-1 rounded-full border border-rose-200/80 bg-stone-50/50 px-3.5 py-2 sm:py-2.5 text-base sm:text-sm text-stone-800 outline-none placeholder:text-stone-400 focus:border-rose-400 focus:ring-2 focus:ring-rose-200/50 disabled:bg-stone-100 disabled:text-stone-400 disabled:cursor-not-allowed"
/>

2. iOS 底部安全區域與防文字撐爆

• Safe Area 適配： iPhone 機型底部具備手勢導覽條（Home Indicator），在底部輸入列加入 pb-[max(0.625rem,env(safe-area-inset-bottom))]，防止按鈕被系統手勢遮擋。

• 長字串破版防護： 使用者若連續輸入無空格文字（例如長網址或連續符號），可能會撐寬對話氣泡，因此在所有 Message Bubble 容器統一補上 break-words 與 break-all。

{/* 使用者訊息氣泡 */}
<div className="max-w-[80%] sm:max-w-[75%] rounded-2xl rounded-br-md bg-stone-200/70 border border-stone-200 p-2.5 text-xs sm:text-sm text-stone-800 shadow-sm break-words break-all">
  {message.image && (
    <img src={message.image} alt="使用者上傳" className="mb-2 max-h-40 sm:max-h-48 rounded-xl object-cover w-full" />
  )}
  {message.text && <p className="px-1">{message.text}</p>}
</div>

敏捷迭代思考：如何定義修復優先級？

從朋友的回饋中，我們梳理出軟體開發中的優先級排序思維：

• P0（阻礙核心路徑 / Blockers）： iOS 聚焦輸入框自動放大導致發送鈕消失。這屬於「無法正常操作」的嚴重 Bug，必須第一時間修復並熱更新上線。

• P1（體驗不一致 / Polish）： 底部 Safe Area 邊距與長文字溢出問題，補齊後能大幅提升跨裝置質感。

• P2（架構與功能擴充 / Feature Request）： 分頁切換保留全量聊天紀錄。目前系統已將每一筆情緒日記與貓咪回覆持久化存入 Firebase Firestore（情緒日曆分頁可隨時查看），未來可進一步將聊天室的本地 State 與全域 Context 或 IndexedDB / LocalStorage 進行深層綁定。

結語

經過真實使用者的實機洗禮，《喵語日誌》在跨平台排版、行動端觸控體驗與極限情況處理上都更加穩健成熟。

明天我們將邁入專案工程化的重要篇章——打造高質感的開源門面！我們將繪製清晰的系統架構圖，並撰寫專業的 GitHub README 與專案展示文件，敬請期待！

明天見，喵～ 🐾