Day 8 介紹過開發者工具的手機模式：切到 iPhone 的尺寸，看看排版有沒有跑掉。

我這幾天都是這樣檢查的，畫面看起來一切正常。

然後我拿起手機，在瀏覽器打上 localhost:3000—— 打不開。

今天要做兩件事：先想辦法讓網站跑到真的手機上；再看看在真機上，有哪些事情是開發者工具看不到的。

一、為什麼手機打不開 localhost？

localhost 的意思是 「這台機器自己」 。

在電腦上打 localhost:3000，是在找電腦自己身上、3000 號門的那個程式——也就是我們利用npm run dev 指令開著的開發伺服器。

但在手機上打 localhost:3000，是在找手機自己身上的 3000 號門。手機上當然沒有開任何伺服器，所以什麼都找不到。要讓手機看到網站，得讓手機連到電腦才行。

二、把網站送到手機上

2.1 同一個 Wi-Fi：先試這個

Next.js 啟動的時候，會印出兩行網址：

- Local:    http://localhost:3000
- Network:  http://192.168.X.XX:3000

第二行是電腦在這個 Wi-Fi 裡的位置（每台電腦的數字會不一樣；沒有顯示的話，也可以自己查電腦的 IP）。手機和電腦連在同一個 Wi-Fi 的話，理論上直接打這個網址可以開，什麼都不用裝。

但我自己測試的過程中，有時候成功，有時候沒有成功。取決與當下Wifi 路由器的設定，原因可能有好幾種，例如：

• Wi-Fi 開了裝置隔離：公司、學校、咖啡廳、訪客網路很常見，會擋同一個網路裡的裝置互相連線
• 電腦的防火牆擋掉了：Mac 第一次跑開發伺服器時，可能會問「是否允許傳入連線」，按了拒絕就連不到

這些都跟網站本身無關，是網路環境的設定。能成功就是最快的方法；不行的話，也不用在這裡卡太久。

小技巧：如果懷疑是 Wi-Fi 的裝置隔離，可以開手機熱點、讓電腦連上去再試。這通常能避開公司、學校或公共 Wi-Fi 的限制，但防火牆還是可能擋。

2.2 出了家門：ngrok

區網 IP 還有一個限制：只有同一個網路裡的裝置能連。 192.168.x.x 這種位置只在你家的網路裡有意義，手機切到行動網路、或想把網站傳給不在旁邊的朋友看，就沒辦法了。 這時候可以用 ngrok。

安裝與設定

2.2.1. 註冊並安裝

先到 ngrok 官網註冊帳號。Mac 可以在終端機中用 Homebrew 安裝，Windows 可以從官網下載：

brew install ngrok

裝完一樣在終端機透過指令確認是否安裝成功：

ngrok version

有印出版本號，就是裝好了。

2.2.2. 設定 authtoken

登入 ngrok 的後台，會看到一串屬於你的 authtoken。複製之後在終端機執行：

ngrok config add-authtoken 你的token

這一步是讓 ngrok 知道「這台電腦是哪個帳號」。只需要設定一次。

ngrok 後台還有一種叫 API key 的東西，那是給程式呼叫 ngrok 管理功能用的，今天用不到，不要拿錯。

【圖 1｜ngrok 後台的 authtoken 位置】

2.2.3. 開通道

開發伺服器保持開著，另開一個終端機：

ngrok http XXXX

它會給你一個公開的網址。任何人、在任何網路，打開這個網址，看到的就是你電腦上正在跑的網站。(localhost:XXXX 的 XXXX 是多少，指令就填多少。）

【圖 2｜ngrok 產生的公開網址】

免費版打開時，有可能會先出現一個提醒頁面，點一下才能進去。這是正常的。

它是怎麼做到的？

你的電腦在家裡的路由器後面。一般家用網路不會讓網路上的人直接連進你的電腦——這是保護你的機制。但一般網路都允許裡面主動連出去，不然你連網頁都沒辦法看。

ngrok 就是利用這一點：

你的電腦 ──（主動往外撥一條線）──→ ngrok 的伺服器
                                          ↑
                              朋友打開那個公開網址

1. 你的電腦主動連到 ngrok 的伺服器，建立一條通道
2. ngrok 給這條通道一個公開網址
3. 有人打開那個網址，請求先到 ngrok 的伺服器，再順著那條通道送回你的電腦
4. 你的電腦回應，再順著原路送回去

因為那條線是從裡面撥出去的，所以不用去改路由器的設定。（公司網路比較嚴格，還是有可能擋掉。）

你可能聽過 nginx，它也會「把請求轉給後面的程式」。差別在於 nginx 通常站在一台外面本來就連得到的伺服器前面；ngrok 則是替外面連不進來的電腦，從裡面往外打通一條路。

2.3 另一個選擇：Cloudflare Tunnel

Cloudflare 也有類似的服務，概念很接近——一樣是從裡面往外撥一條通道。

brew install cloudflared
cloudflared tunnel --url http://localhost:3000

它會給你一個 trycloudflare.com 結尾的臨時網址。這種用法不用註冊帳號，按 Ctrl+C 就結束，網址每次都會換。

之後也可以建立正式的通道、綁定自己的網域，那是另一種設定方式，Day 22 再談。

今天用哪一個都可以，我用的是 ngrok。

2.4 用完記得關

最後一件很重要的事：通道開著的時候，你的開發中網站是對全世界公開的。

任何拿到網址的人都打得開，而開發中的網站常常會顯示比較完整的錯誤訊息。這是 Day 6 那句話的延伸：送到使用者手上的東西，沒有秘密。 所以測完就關掉（在終端機按 Ctrl + C 就可以終止），不要讓它一直開著。截圖時也留意一下網址列，別把通道的網址整個露出來。

三、拿起手機，開始比對

網站終於在手機上打開了。我拿著它實際滑了一輪，再回到電腦，用開發者工具的手機模式比對。

3.1 同一個下拉選單，兩種長相

第一個不一樣的地方，一打開就看得到。點「全部藝人」那個篩選選單，會發現在開發者工具裡跟在實機上，長得不一樣。

原因是：像下拉選單這種瀏覽器內建的元件，展開之後長什麼樣，大部分是瀏覽器和作業系統決定的。 網站可以調整一部分樣式，例如收起來時那顆按鈕，但展開後的清單很難完全控制。開發者工具裡看到的，是電腦版 Chrome 畫的；手機上看到的，是 iOS 畫的，而且是設計給手指點的。

這裡有兩個選擇：

• 維持系統原生的樣子：系統畫的選單本來就為手指點擊、螢幕閱讀器這些情況設計過，不用多寫任何東西
• 自己設計一個下拉選單：可以跟網站風格完全一致，但鍵盤操作、無障礙、長清單的捲動，這些原本免費附送的東西，都要自己補回來

我選擇先維持原生。這個差異不算問題，只是提醒我們：開發者工具看到的，不一定是使用者看到的。

3.2 點輸入框，畫面自動放大

第二個問題是：我在手機上點了一下搜尋框，準備打字——整個畫面被放大了。 打完字，還要自己用兩隻手指縮回來，蠻影響體驗的。會出現這個的原因是目前輸入框的字級是 14px。在 iPhone 的 Safari 上，字級小於 16px 的輸入框，點下去時常會觸發自動放大，目的是讓使用者看清楚自己在打什麼。

【圖 3｜比對差異】

3.3 為什麼會有差？

這兩個例子背後，是同一件事：

你在電腦的 Chrome 裡選了一台 iPhone，跑的還是電腦的 Chrome。

開發者工具可以模擬螢幕尺寸、一部分的觸控，甚至網路速度。但它終究是在電腦的瀏覽器裡「模擬」。

選單展開後長什麼樣，是 iOS 決定的；輸入框要不要放大，是 Safari 的規則。這些東西，電腦上的 Chrome 都沒有。再加上真的鍵盤、真的手指、會伸縮的網址列，真機上多出來的東西，開發者工具不一定能忠實重現。

開發者工具適合快速檢查排版；但要知道使用者真正拿到的是什麼，還是得用真的手機。

3.4 常見差異

以下這幾個是我曾在其他專案也踩過、而且開發者工具不一定能忠實重現的。之後每做一個新畫面，都可以拿出來對一次，或是在實作的時候，就要先提醒 AI 在手機版頁面上的處理：

拿目前的專案來看，卡片上的「查看完整配置」一直都顯示，並沒有設計成要 hover 才顯示；底部也沒有被擋住的東西。但有一些點擊的區域，確實不太好點。

四、響應式設計：塞得下，不等於排得好

前面講的，是只有真機才看得到的問題。但拿著手機滑的時候，我還注意到兩個地方怪怪的。回頭用開發者工具看，其實也看得到——只是之前一直沒注意，包含篩選區排版不對齊，以及專輯詳細資訊直接換行，導致留白太多。

這兩個問題的東西有顯示，都有放，但是有點醜，沒有針對手機的排版做安排。

這是瀏覽器自動做的——空間不夠，就換到下一行。內容都看得到，但誰該在前面、哪裡留白、怎麼對齊，沒有人決定過。

響應式設計（Responsive Web Design，常簡稱 RWD）要做的，就是把這件事拿回來自己決定：針對不同的螢幕，重新安排。 例如：

• 桌機上一排三張卡片，手機上一排兩張
• 桌機上並排的篩選選單，手機上可以改成一排、左右滑動；或者乾脆收成一顆「篩選」按鈕。
• Drawer 可以考慮改成從底部滑出 Bottom Sheet
• 桌機上排成一列的資訊，手機上可以調整排版方式，或是進行取捨。

不過這種事情沒有標準答案，審美是主觀的。看你是否在乎這些微小的細節來提升使用者的體驗。

五、請 AI 修

找到問題之後，我們就可以不只是跟 AI 說「手機上怪怪的」，而是把每個問題講清楚：
像前面三、四部分的問題，我也都會在 Prompt 中説明清楚：

以下是在 iPhone 實機上發現的問題，請逐一修正：

• 搜尋框點擊時會觸發 iOS 畫面自動放大，我希望不要有這個問題。
• 篩選區在窄螢幕上，篩選的各個選單排版沒有對齊，似乎是以該選單中的最長選項作為寬度。你認為要調整對齊方式，還是說只留一個篩選按鈕在展開？橫向滑動的一排／一顆「篩選」按鈕，點擊後從底部滑出 Bottom Sheet 這兩種方式你建議哪一種？
• 專輯詳細資訊在窄螢幕上被擠到換行，請重新排列，讓重要的資訊在前面
• 「清除篩選」的可點擊範圍太小，請放大到至少約 44px
• 桌機版的樣子維持不變

開始修改前，先說明你預計怎麼改、會動到哪些檔案。

六、驗收：回到真機上

改完之後，也要回到手機上再測一次，不能只在開發者工具裡看。

最後一項很容易忘記。改手機版的時候，桌機版也要回頭確認。

換個領域：手機上最容易出事的地方

今天遇到的問題，在別的產品上也一樣常見：

• 電商：結帳按鈕固定在畫面底部，剛好被 iPhone 的橫條擋住一半
• 表單：輸入框字太小，一點下去整個畫面放大，填完還要自己縮回來
• 後台：桌機上好好的表格，在手機上寬到要左右滑

它們的共同點是：只在電腦上開發、也只在電腦上驗收，就很容易一路漏到上線之後才發現。

結語與明日預告

今天介紹了 ngrok，讓你在開發過程中，可以利用實機測試手機版上的畫面。當然，這些的用途也不僅限於一般網站，有時候本地的後端伺服器也可以透過這種方式來讓外部可以連入。

這幾天我們請 AI 改了好幾個地方，而且都直接改在 git 的同一個分支上。如果改完才發現桌機版哪裡壞了呢？或是想讓 AI 試一種完全不同的設計，又想留著現在這版？

明天，我們會再更詳細的介紹 git 的進階用法。

我們明天見。