如何建立適合手機使用嘅網頁應用程式

適合手機使用嘅網頁應用程式，就係喺手機上運作如同應用程式嘅網站：佢能夠配合窄螢幕、有夠大嘅觸控目標、喺流動數據上快速載入，並且可以以漸進式網頁應用程式（PWA）形式加到主屏幕。對大多數新應用程式嚟講，呢個係實際可行嘅第一版：一套程式碼、一個連結、毋須商店審核。不過佢有真正嘅限制，特別係 iPhone 上嘅通知同深層裝置存取，本指南會直接講明幾時先需要原生應用程式。

「適合手機」嘅三種方式

PWA 就係附加少少功能嘅響應式網頁應用程式，所以前兩者你唔使二揀一。先做響應式，再令佢可以安裝。要深入比較，請參閱 原生與漸進式網頁應用程式比較。

網頁應用程式喺手機上做得到及做唔到嘅嘢

瀏覽器能做嘅嘢，比好多人想像中多：

• 相機及相片上載，透過標準檔案輸入功能。
• 位置資訊，需要用戶許可。
• 安裝到主屏幕，附有圖示並可全螢幕啟動。
• 離線使用，透過 Service Worker（瀏覽器為你嘅網站運行嘅背景腳本）快取頁面及數據。
• 推送通知，但 iPhone 有一個限制。Apple 嘅 WebKit 團隊表示，網頁推送已於 iOS 及 iPadOS 16.4 推出，適用於加入主屏幕嘅網頁應用程式。用戶必須先安裝應用程式，然後再允許通知。

原生應用程式仍然較勝一籌嘅地方：

• 深層裝置功能，例如背景定位、藍牙配件、健康數據及主屏幕小工具。瀏覽器對呢啲功能嘅支援有限，或者因平台而異。
• 應用程式商店曝光。 如果人哋會喺商店搜尋你，你就必須身處其中。
• 大量離線工作，例如於背景同步嘅大型數據集。
• 對效能要求高嘅圖像，例如高要求嘅遊戲。

如果以上嘅嘢都唔係你應用程式嘅核心，網頁應用程式大機會已經足夠。

優先為手機設計

先設計手機版面，再讓佢喺較大螢幕上擴展；倒過來做通常會令手機螢幕顯得擠迫。

版面

• 細螢幕採用單欄。 側邊欄改為底部欄或選單。
• 唔好橫向捲動。 闊表格改為卡片，或者喺自己嘅容器內捲動。
• 唔使縮放都易讀，內文大約 16px。

觸控

• 大型點擊目標。 大約 44 x 44 像素係常見嘅最小尺寸。元素之間要留有空間。
• 主要操作置於拇指觸及範圍內，喺較高嘅手機上即係接近螢幕底部。
• 唔好設計只可以透過懸停操作嘅功能。 觸控螢幕冇懸停，所以懸停時先出現嘅工具提示同選單都用唔到。
• 適當嘅鍵盤。 電郵欄位應該彈出電郵鍵盤，電話欄位則應該彈出數字鍵盤。要設定正確嘅輸入類型。

速度

• 細尺寸嘅圖片，並且按需要喺進入畫面時先載入。
• 減少笨重嘅函式庫。 每個函式庫都會增加流動數據嘅下載時間。
• 骨架畫面或清晰嘅載入狀態，令應用程式永遠唔會似乎凍結。

安全區域及網址列

喺現代手機上，內容可能會被瀏海或主頁指示器遮住，特別係喺全螢幕安裝嘅應用程式入面。要要求安全區域間距。另外留意高度全屏嘅版面，因為瀏覽器網址列出現同消失時，版面可能會跳動。

令其可以安裝（PWA）

要可以安裝，網頁應用程式需要：

1. 網頁應用程式清單（manifest）：一個細小嘅檔案，包含應用程式名稱、簡稱、圖示、主題顏色，以及開啟方式（通常係全螢幕「standalone」）。
2. 圖示，尺寸要符合各平台要求，包括一個適合 Apple 裝置嘅圖示。
3. HTTPS，任何妥善託管嘅應用程式本身都已具備。
4. Service Worker，如果你想支援離線使用或推送通知。

然後告訴用戶點樣安裝。Android 瀏覽器通常會提供安裝提示或選單項目；喺 iPhone 上，則要按分享按鈕，再選「加入主屏幕」。加上一段附有以上步驟嘅簡短「安裝此應用程式」說明，會有很大幫助。

離線支援係 PWA 變得複雜嘅地方。將應用程式頁面快取起來，令佢喺冇網絡時都可以開啟，係直接嘅做法。讓用戶離線更改數據，然後再同步，就需要認真落力，所以只有當你嘅用戶真正需要時，先要加入呢個功能。

一條行得通嘅第一條提示詞

幫我哋嘅清潔團隊建立一個網頁應用程式，用嚟查看今日嘅工作，並標示完成。先為手機設計：單欄版面、大型點擊目標、主要操作按鈕固定於接近底部位置、唔設只可懸停操作嘅控制項、唔好橫向捲動，並為電話及電郵欄位設定正確嘅鍵盤。每項工作顯示地址（點擊即可在地圖開啟）、客戶電話（點擊即可撥打）、一份核對清單，以及一個「標示完成」按鈕，可以附加相片。經理用電腦登入以指派工作；喺闊螢幕上，就用表格代替卡片。將佢設為可安裝嘅 PWA，包括清單、圖示及獨立顯示模式，並快取應用程式外殼，令佢喺冇訊號時都可以開啟。數據儲存於資料庫。

建立步驟

1. 先用範例數據建立手機版面，並喺手機尺寸嘅預覽中檢查。
2. 喺真實手機上測試：如果你嘅用戶兩種手機都用，至少要用一部 iPhone 同一部 Android。模擬器會遺漏一些問題，例如螢幕鍵盤遮住輸入欄。
3. 用一隻拇指完成主要任務。 如果任何步驟需要用兩隻手或者縮放，就要修正。
4. 加入清單及圖示，然後喺兩個平台上安裝，檢查圖示、名稱及啟動畫面。
5. 決定離線支援範圍。 由「冇網絡時都可以開啟，並顯示清晰訊息」開始；只有需要時，才加入離線編輯功能。
6. 喺慢速網絡下檢查速度。 你嘅瀏覽器開發人員工具可以模擬慢速網絡。
7. 最後先加入通知功能（如果需要）；並為唔安裝應用程式嘅用戶預備電郵作為後備方案。

常見錯誤

• 只喺大型顯示器上設計。 每一步都要喺手機寬度下檢查每個畫面。
• 表格超出畫面。 細螢幕上應該將每行改為卡片。
• 點擊目標太細，連結又太貼近。
• 表單同鍵盤打架：輸入類型錯誤、欄位被鍵盤遮住、冇「下一步」流程。
• 假設 iPhone 嘅推送功能可以喺瀏覽器分頁中運作。 其實要先將應用程式安裝到主屏幕。
• 承諾會推出 App Store 應用程式，但實際上做唔到。 如果商店好重要，就應該另行規劃。
• 將網站包裝後就稱之為應用程式。 Apple 嘅 App Review Guidelines 要求應用程式要超越重新包裝嘅網站；單薄嘅包裝有被拒絕嘅風險。

幾時需要原生應用程式

喺以下情況，就應該採用原生應用程式（或者喺網頁應用程式之後計劃原生版本）：

• 客戶要透過商店先搵到你。
• 你依賴背景定位、藍牙、健康數據、小工具或其他瀏覽器未能穩定提供嘅裝置功能。
• 你嘅應用程式需要長時間完全離線運作。
• 你嘅用戶有此期望：部分受眾就係唔會使用冇喺商店上架嘅嘢。

商店發布本身有其成本同步驟。根據 Apple 同 Google 各自網站所示，截至 2026 年 9 月，Apple 開發者計劃每年收費 99 美元，Google Play 開發者帳戶則係一次性收費 25 美元，而且每次發布都要經過審核。許多團隊會先以適合手機嘅網頁應用程式起步，驗證人哋是否需要呢款產品，待確定之後，才投資原生版本。如何用 AI 建立應用程式 會完整介紹呢個首個階段。

用 Mythex 建立

Mythex 可以建立網頁應用程式：你喺對話中描述應用程式，然後喺桌面嘅即時預覽中檢查，亦可以喺一個可以調整大小嘅 手機尺寸框架 中查看。文件中有一個 適應手機版面嘅提示詞，用於修正細螢幕版面。你可以如同要求其他功能一樣，要求加入 PWA 清單及圖示，然後發布到一個可以喺任何手機上開啟嘅公開連結。Pro 方案亦可以 將應用程式包裝成 Android 同 iPhone 應用程式，並發送到 Google Play 內部測試及 TestFlight。想開始嘅話，可以參閱 AI 網頁應用程式建立工具，或者瀏覽 應用程式範本。如果想看實際例子，可以閱讀 如何建立習慣追蹤應用程式。

常見問題