隨著 iPhone 螢幕尺寸不斷進化，從 iPhone 12 的 390px 到 iPhone 16 Pro Max 的 460px， 網頁設計 師需要採取 響應式網頁設計 策略來滿足多樣化裝置的需求。

本篇文章將深入探討 iPhone 螢幕尺寸與解析度的相關知識，並提供 手機 網頁設計 的實用技巧，讓網頁無論在 iPhone 12、iPhone 14 或 iPhone 16 Pro Max 上都能呈現出色的使用體驗。

文章目錄：

一、iPhone 螢幕尺寸與解析度的基礎知識

1. DPI 和 PPI 是什麼？

DPI ——

最初用來衡量列印物上每英寸的點數密度，也就是表示印表機每英寸可以列印的點數。

DPI 值越低，列印內容的清晰度越差。

當 DPI 的概念被遷移到電腦螢幕時，應該稱為 PPI。

PPI ——

表示電腦螢幕上每英寸可以顯示的像素數量。

在高解析度螢幕上，單個像素可能會小到肉眼無法分辨。

2. pt 和 px 是什麼？

• pt ——
  代表「點」，是一種標準長度單位，定義為：1 pt = 1 / 72 英寸。
  這是一個固定的物理長度單位。
  以設計和開發應用程式時的標準單位來表示螢幕上的大小。
  
  
• px ——
  代表「像素」，是螢幕顯示的最小單位。
  在高解析度螢幕上，單個像素可能會小到肉眼無法分辨。
  實際顯示的像素數量，通常是點解析度 (pt) 與比例因子的乘積。
  
  
• 比例因子：例如 @2x 或 @3x，表示像素密度相較於標準比例的倍數。
  
  

3. iPhone 螢幕尺寸一覽表

資料來源：https://www.apple.com/tw/iphone/compare/

• 從 iPhone 12 的 390px 到 iPhone 16 Pro Max 的 460px，螢幕不斷增大且像素密度精細化。
  例：iPhone 16 Pro Max 的物理解析度為 1320x2868px，提供更高顯示精度。

4. iPhone Retina 顯示器的優勢

Retina 螢幕首次在 iPhone 4 上推出，讓螢幕的像素密度達到了肉眼無法分辨的細緻度。

簡單來說，就是 Apple 在相同大小的螢幕上塞入了兩倍的像素，讓畫面變得更加清晰細緻。

以 iPhone 3GS 為例，它的螢幕解析度是 320 x 480 像素，共有 153,600 個像素點，

而 iPhone 4 則是 640 x 960 像素，總共有 614,400 個像素點，像素數量是原來的四倍。

為了解決高解析度螢幕與舊款 App 的問題，Apple 引入了「點」（point）的概念。

iPhone 4 雖然和 iPhone 3GS 的螢幕尺寸一樣都是 3.5 吋，但它的解析度和像素數量卻大幅提升。

在 iPhone 3GS 上，一個「點」等於一個像素；而在 iPhone 4 上，一個「點」則等於兩個像素。

這樣，開發者就能輕鬆地讓舊款 App 也能適配到新螢幕，並且保持畫面清晰細緻。

因此，iPhone 4 的螢幕在物理尺寸不變的情況下，顯示效果比 iPhone 3GS 更加精細。

5. iPhone 解析度縮放邏輯

iPhone 6/6s Plus解析度是1242 x 2208，為什麼渲染後解析度變成1080 x 1920？

在 iPhone 6 Plus 上，雖然理論上應該使用 @2.46x 的素材（根據它的 PPI 計算），

但實際上 Apple 採用了 @3x 的素材並將其縮放至 @2.46x，

這樣可以簡化開發者的工作流程，並且保持顯示品質。

iPhone 6 Plus 的 PPI 是 401，而 iPhone 6/6s 的 PPI 是 326，

這兩者的差異理論上應該導致不同的素材比例。

如果按照 401 / 326 的比例，@2x 的素材應該被縮放為 @2.46x。

但是，這個比例對開發者來說較為複雜，因此 Apple 選擇使用 @3x 的素材，

並將其縮放至大約 82%（2.46 / 3 = 0.82），

實際上 Apple 使用了約 87% 的比例來進行縮放。

這樣，虛擬解析度與物理解析度的比例變為約 87%，

也就是 1080 / 1242 ≈ 0.87 和 1920 / 2208 ≈ 0.87，

可以簡化圖像的處理並保證顯示效果的清晰度。

所以，最終的解析度雖然變成了 1080 x 1920，

但這仍然是根據 iPhone 6 Plus 的實際需求進行優化和調整，

既能保持顯示品質，也能讓開發者在建立素材時更輕鬆。

二、手機 網頁設計 的核心要點

1. 彈性網格系統

在設計手機版網頁時，靈活的版面配置非常重要。

以 iPhone 為例，無論是 iPhone 6、iPhone 12 還是 iPhone 16，

其螢幕尺寸和解析度都各有不同，

因此設計時需要採用彈性網格系統與百分比寬度來確保網頁能夠自動適合各種尺寸。

彈性網格系統是一種基於列（columns）和行（rows）的排版方式，

能夠根據螢幕的寬度自動調整每個元素的比例與位置。

這樣的設計可以在不同的螢幕尺寸上，無論是較小的 iPhone SE 還是大螢幕的 iPhone 16 Pro Max，網頁都能夠提供一致且流暢的使用體驗。

圖：網格系統

2. 百分比寬度設計

百分比寬度則是另一個關鍵。

透過設定元素的寬度為百分比（例如 100%、50% 等），

可以使頁面內容根據螢幕的大小自動縮放，

避免固定寬度所帶來的顯示問題。

例如，在 iPhone 6 Plus 上，螢幕寬度為 1080 像素，當

使用百分比寬度設計時，頁面可以根據這個寬度進行縮放，

使得圖片、文字和按鈕等元素能夠隨著螢幕大小的變化而適當調整，

確保使用者無論在何種裝置上瀏覽時都能獲得最佳視覺效果。

採用彈性網格和百分比寬度的設計方式，

是為了讓手機版網頁能夠靈活適應不同 iPhone 裝置，

並提供一致、流暢且易於使用的體驗。

圖：百分比寬度設定

三. 如何進行手機 網頁設計 邊距與空間設計

在手機網頁設計中，邊距與空間的設計非常重要，這會影響使用者的體驗和介面的易讀性與操作性。

只要預留好安全邊距、設計夠大的點擊區域，再搭配彈性佈局，

就能打造適合 iPhone 12、iPhone 14 和 iPhone 16 Pro Max 的漂亮網頁！

記住，簡潔、易讀是王道，再加上響應式設計，無論什麼裝置都能完美呈現。

以下針對 iPhone 12 (390px)、iPhone 14 (430px) 和 iPhone 16 Pro Max (460px) 三種解析度，

介紹如何進行邊距與空間設計。

1. 預留邊距，使內容不被遮蔽

(1) 建議邊距(padding)設定：

• 常見的安全邊距範圍是 8% ~ 12% 的螢幕寬度
  
  
• 安全邊距（Safe Area）：
  預留 37px 至 55px 的邊距，讓重要內容（如按鈕、標題文字）不會被邊框遮擋或影響閱讀。
  
  
• iPhone 12 (390px)：
  文字區塊兩側建議保留 31.2px 的安全邊距。
  
  
• iPhone 14 (430px)：
  文字區塊兩側建議保留 35px，內容呈現會更均勻。
  
  
• iPhone 16 Pro Max (460px)：
  文字區塊兩側建議保留 37px，避免螢幕過寬造成視線疲勞。
  
  

(2) padding 小技巧：

透過 CSS 的 padding 和 max-width 控制內容區域：

.container {
 padding: 0 16px;
 max-width: 400px; /* 針對小螢幕設計 */
 margin: 0 auto;
}

2. 設計點擊區域，增強可用性

在 iphone 瀏覽網頁時，點擊區域必須夠大，特別是按鈕和互動元素。以下是建議：

• 點擊區域最小尺寸：
  建議最小高度為 48px，讓使用者輕鬆操作。
  
  
• 按鈕間距：
  按鈕之間需保留 8px 至 12px，避免誤觸。
  
  

(1) 範例按鈕設計：

針對三種裝置，按鈕的寬度應根據螢幕寬度進行調整：

• iPhone 12：按鈕寬度約 328px（390px - 16px*2）
• iPhone 14：按鈕寬度約 370px（430px - 20px*2）
• iPhone 16 Pro Max：按鈕寬度約 400px（460px - 20px*2）

(2) CSS 實現範例：

.button {
 display: block;
 width: calc(100% - 32px); /* 16px x 2 的邊距 */
 max-width: 400px;
 height: 48px;
 margin: 8px auto;
 background-color: #007BFF;
 color: white;
 text-align: center;
 line-height: 48px;
 border-radius: 8px;
}

3. 彈性佈局與間距設計

網格系統（Grid System）使用彈性佈局（Flexbox 或 Grid），適應不同解析度：

• iPhone 12：
  單列最多容納 2 個元素，每個元素寬度 50%。
  
  
• iPhone 14：
  可容納 3 個元素，每個元素寬度約 33%。
  
  
• iPhone 16 Pro Max：
  單列最多容納 4 個元素，每個元素寬度 25%。

(1) css 範例

.grid {
 display: flex;
 flex-wrap: wrap;
 gap: 16px;
}
.grid-item {
 flex: 1 1 calc(33.333% - 16px); /* 預設三等分 */
 max-width: calc(33.333% - 16px);
 background: #f2f2f2;
 text-align: center;
 padding: 16px;
 border-radius: 8px;
}

(2) 元素間距

• 段落間距： 建議使用 24px，保持適當的閱讀空間。
• 圖片與文字間距： 預留至少 16px，增強整潔感。

4. 視覺階層與響應式設計

• 字體大小：
  標題文字應設定為 20px 至 24px，內文文字為 14px 至 16px。
  
  
• 響應式斷點：
  使用媒體查詢（media query）調整適合不同螢幕
  
  
• css 範例：

@media (max-width: 390px) {
.container {
 padding: 0 12px;
}
}
@media (min-width: 430px) and (max-width: 440px) {
.container {
 padding: 0 20px;
}
}

四．手機 網頁設計 文字與圖片比例最佳化

在 手機網頁設計 中，文字和圖片的比例是影響使用者體驗的重要因素。

透過調整字體大小、行間距以及圖片顯示範圍，可以提升整體閱讀舒適度與視覺效果。

注意圖片的安全邊距與比例，使視覺效果完整。

不管是文字還是圖片，適當的搭配和空間分配才能帶來最佳的手機閱讀體驗！

1. 文字設計：字體大小與行間距

手機螢幕空間有限，文字設計需要考慮易讀性和視覺平衡。

• 字體大小建議：

  • 標題字體：18px 至 24px
  • 內文字體：14px 至 16px
  • 按鈕文字：14px 至 16px
    
    

• 行間距建議：

  • 行間距（line-height）應設定為字體大小的 1.5 至 1.8 倍，讓文字間隔更清晰、不擁擠。
  • 範例：文字大小為 16px，行間距可設為 24px。

css範例：

p {
 font-size: 16px;
 line-height: 24px;
}
h1 {
 font-size: 24px;
 line-height: 36px;
}

• 段落間距：
  段與段之間應有適當的空白（margin），建議設定為 16px 至 24px，讓內容有呼吸空間。

2. 圖片設計：安全邊距與比例

圖片在手機螢幕上需要考慮顯示範圍和比例，避免過多裁切影響視覺效果。

• 安全邊距：
  預留 16px 至 20px 的邊距，讓圖片不會貼邊顯示，避免關鍵資訊被螢幕邊緣遮住。
  
  

• 圖片比例建議：
  以 16:9 或 4:3 為主，適合多數手機螢幕。過於高或寬的圖片可能需要裁切，影響內容呈現。
  
  

• 圖片裁切注意事項：
  圖片內的文字或關鍵元素應保持在安全區域內（通常為圖片中間 80% 的範圍），避免重要資訊被截掉。
  
  

css 範例：

img {
 width: 100%;
 height: auto;
 margin: 16px 0;
 border-radius: 8px; /* 圓角讓圖片更美觀 */
}

3. 文字與圖片搭配的最佳作法

• 保持比例平衡：
  圖片不要過大壓縮文字空間，
  建議每段文字搭配一張圖片，避免內容過於單調或冗長。

• 文字與圖片的間距：
  圖片與文字之間應保留至少 12px 至 16px 的空隙，
  讓版面看起來整潔有序。

• 視覺引導：
  使用大圖作為頁面焦點，搭配標題與簡短文字，
  引導使用者瀏覽。

五、手機 網頁設計 實用工具與測試技巧

以下是幾款推薦的設計工具，適合設計師進行手機網頁的布局規劃：

1. UI/UX 的規劃與設計工具 - Figma、Sketch 和 Adobe XD

• 這些工具則是專注於 設計工作，特別是 UI/UX 的規劃與設計階段，並非直接用於網站建構。
• 它們的產出通常是設計稿（例如原型或模型），需要與開發工具或 CMS（例如 Joomla 或 WordPress）結合，才能將設計實現為實際的網站。

(1) Figma

https://www.figma.com/

• 優勢：
  • 建置於雲端，支援多人即時協作，適合團隊專案。
  • 提供豐富的元件庫和插件，可快速建立響應式設計範本。
  • 支援不同裝置尺寸預覽，讓設計更貼近實際使用情境。
    
    
• 適合使用場景：
  設計需要頻繁調整或多方協作時，Figma 是最佳選擇。

(2) Sketch

https://www.sketch.com/

• 優勢：
  • 擁有強大的符號（Symbols）和樣式（Styles）功能，適合設計一致性的界面。
  • 支援多個畫板，輕鬆測試各種裝置尺寸的版面效果。
    
    
• 適合使用場景：
  適合 Mac 使用者，特別是需要開發 App 或以 iOS 為主的設計。

(3) Adobe XD

https://helpx.adobe.com/tw/xd/get-started.html

• 優勢：
  • 直覺的介面，快速上手，適合初學者。
  • 支援設計與原型製作，並內建動態效果模擬。
  • 與 Adobe 生態系統整合，可與 Photoshop 和 Illustrator 無縫搭配。
    
    
• 適合使用場景：
  對於需要製作高保真原型並模擬交互效果的專案，Adobe XD 是理想工具。

(4) Figma、Sketch、Adobe XD 比較表

2. 網頁設計編輯器 - SP Page Builder、Elementor

(1) SP Page Builder（Joomla）

https://www.joomshaper.com/page-builder

• 主要用途：
  幫助 Joomla 用戶快速建立網站頁面，提供直觀的拖放式編輯功能。

• 特點：

  • 拖放式建構：
    支援拖放編輯，不需要懂程式碼即可設計頁面。
    
    
  • 元件豐富：
    包含圖片輪播、按鈕、表單、動畫效果等常見功能。
    
    
  • 與 Joomla 整合：
    完美兼容 Joomla 的模組與內容管理功能。
    
    
  • 多語系支援：
    預設支援 Joomla 的多語系系統。
    
    

• 適用對象：

  • 對 Joomla 網站平台熟悉的開發者或內容管理者。
  • 想快速建置公司網站、部落格或活動頁面。

(2) Elementor（WordPress）

https://elementor.com/

• 主要用途：
  為 WordPress 使用者提供強大的頁面設計工具，實現精細的網站設計。
  
  

• 特點：

  • 即時預覽：
    編輯過程中可以即時查看頁面效果，所見即所得。
    
    
  • 插件生態系統：
    支援多數 WordPress 插件與主題，功能擴展性極高。
    
    
  • 響應式設計：
    可針對不同裝置調整設計，確保

六、相關文章

• 網頁設計 必備指南：工作流程和相關知識
• 網站架設 的基礎介紹｜馬上了解 架設網站 的方法！
• https://des13.com/news/web/1579-ai-web.html

七、常見問題（FAQ）