數位行銷

設計師必看!為 iPhone 12 到 iPhone 16 Pro Max 優化 網頁設計

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

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

文章目錄:

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

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

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

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

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

六、相關文章

 

 

 

 


一、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,提供更高顯示精度。
裝置螢幕尺寸(吋)點解析度(pt)比例因子像素解析度(px)PPI物理解析度
iPhone / 3G / 3GS 3.5 320 x 480 @1x 320 x 480 163 =
(同像素解析度用=表示)
iPhone 4 / 4s 3.5 320 x 480 @2x 640 x 960 326 =
iPhone 5 / 5s / 5c 4.0 320 x 568 @2x 640 x 1136 326 =
iPhone SE 第一代 4.0 320 x 568 @2x 640 x 1136 326 =
iPhone 6 / 6s / 7 / 8 / SE 第二代 4.7 375 x 667 @2x 750 x 1334 326 =
iPhone 6 Plus / 6s Plus / 7 Plus / 8 Plus 5.5 414 x 736 @3x 1242 x 2208 401 1080 x 1920
iPhone X / Xs / 11 Pro 5.8 375 x 812 @3x 1125 x 2436 458 =
iPhone XR / 11 6.1 414 x 896 @2x 828 x 1792 326 =
iPhone Xs Max / 11 Pro Max 6.5 414 x 896 @3x 1242 x 2688 458 =
iPhone 12 mini / 13 mini 5.4 375 x 812 @3x 1125 x 2436 476 1080 x 2340
iPhone 12 / 12 Pro / 13 / 13 Pro / 14 6.1 390 x 844 @3x 1170 x 2532 460 =
iPhone 14 Pro / 15 / 15 Pro / 16 6.1 393 x 852 @3x 1179 x 2556 460 =
iPhone 16 Pro 6.3 402 x 874 @3x 1206 x 2622 460 =
iPhone 12 Pro Max / 13 Pro Max / 14 Plus 6.7 428 x 926 @3x 1284 x 2778 458 =
iPhone 14 Pro Max / 15 Plus / 15 Pro Max / 16 Plus 6.7 430 x 932 @3x 1290 x 2796 460 =
iPhone 16 Pro Max 6.9 440 x 956 @3x 1320 x 2868 460 =

 

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 的 paddingmax-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:94: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 比較表

功能/特性FigmaSketchAdobe XD
適用平台 網頁版、Windows、Mac,無需安裝(雲端協作工具) 僅適用於 Mac Windows、Mac
協作能力 即時多人協作(多用戶可同時編輯) 支援協作,但需透過外部插件實現 支援協作,需 Adobe Creative Cloud
使用難度 易上手,適合所有等級設計師 對專業設計師更友好,有些功能需要學習 直觀介面,適合初學者與專業設計師
設計資源支持 提供豐富的社群插件與模板資源 擁有龐大的模板與符號庫 與 Photoshop、Illustrator 無縫整合
跨平台兼容性 直接支援各種解析度與響應式設計 對於 iOS 設計極為友好 支援多種裝置與平台
動態設計能力 提供基本的互動與動畫效果 互動效果需透過第三方工具實現 提供完整的互動和動畫設計功能
定價模式 免費(部分功能需訂閱) 一次性購買授權 免費基本版,高級功能需訂閱

 

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 插件與主題,功能擴展性極高。

    • 響應式設計:
      可針對不同裝置調整設計,確保所有螢幕上效果一致。

    • 強大的設計控制:
      提供細緻的排版、間距、顏色等設計選項。

  • 適用對象:

    • 想用 WordPress 快速建站的初學者或專業設計師。
    • 需要靈活且可擴展的 網頁設計 工具。

 

(3) SP Page Builder 與 Elementor 比較

功能/特性SP Page Builder (Joomla)Elementor (WordPress)
適用平台 Joomla WordPress
操作介面 拖放式編輯,簡單直觀 拖放式編輯,支援即時預覽
元件庫與模板 提供多樣化的元件(圖片輪播、表單、按鈕等)和模板 擁有大量內建元件和第三方插件支持
多語系支持 支援 Joomla 的內建多語系功能 需搭配 WPML 或 Polylang 等插件實現
響應式設計能力 可針對不同裝置調整樣式,支援預覽 強大的響應式設計功能,支援不同裝置的自訂樣式
生態系統擴展 與 Joomla 外掛和模組無縫整合 支援多數 WordPress 插件和主題,擴展性極高
學習曲線 對 Joomla 用戶相對簡單,非技術人員也能快速上手 適合初學者和專業設計師,使用更普遍
社群支持與資源 Joomla 用戶社群支持 擁有龐大的全球用戶社群與豐富教學資源

 

3. 工具適用場景

1. SP Page Builder 與 Elementor

SP Page Builder 和 Elementor 是針對 網頁內容編輯 所開發的頁面編輯工具,

主要用於 直接管理網站頁面,例如:排版、元件添加、內容編輯等,

這些工具的特色是所見即所得(WYSIWYG)的操作介面。

它們專注於「網站開發」的後端與前端設計,適合希望快速構建專業網站的人。

  • SP Page Builder:
    適合 Joomla 平台,用於快速建立響應式頁面,簡單且高效率。

  • Elementor:
    適合 WordPress 平台,擁有強大的擴充性,
    對於需要靈活設計的用戶非常實用。

2. Figma、Sketch、Adobe XD

這些工具則是專注於 設計工作,特別是 UI/UX 的規劃與設計階段,並非直接用於網站建構。

它們的產出通常是設計稿(例如原型或模型),

需要與開發工具或 CMS(例如 Joomla 或 WordPress)結合,

才能將設計實現為實際的網站。

  • Figma:
    適合團隊專案,支援即時多人協作,是遠程協作的最佳選擇。

  • Sketch:
    適合 Mac 用戶,特別是專注於 UI/UX 設計的人,對 iOS 平台支持極佳。

  • Adobe XD:
    適合需要整合 Adobe 生態系統(如 Photoshop 和 Illustrator)的設計師,動態設計能力出色。


選擇工具時,可以根據使用的平台、團隊協作需求以及設計需求來決定,

以上工具都是創建高品質設計的不錯選擇!

 

4. 預覽及測試手機網頁技巧

在完成設計後,進行測試是讓響應式設計效果的關鍵步驟。

以下是實用的測試技巧:

  1. 模擬不同裝置尺寸

    • 利用瀏覽器的開發者工具(如 Chrome DevTools),模擬不同手機解析度(如 iPhone 12、iPhone 14、iPhone 16 Pro Max),檢查版面是否一致。
    • 測試工具示例:
      bash
      Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac) → 點擊裝置模擬圖示
  2. 跨平台測試

    • 使用專業測試工具,
      如 BrowserStack 或 LambdaTest,模擬各種手機系統和瀏覽器的實際效果,讓網頁設計在不同環境下的兼容性。

  3. 實機測試

    • 在真實裝置上進行測試,特別是用於測試觸控操作的流暢性,以及圖片與文字是否清晰呈現。

 

 

 

 

 


六、相關文章

網頁設計 網站教學:怎麼做 響應式網頁?

https://des13.com/youtube/1586-youtube4.html

 

響應式 網頁設計:如何在桌機與手機顯示不同圖片

https://des13.com/youtube/1589-youtube5.html

 

網站教學:無須程式碼,輕鬆做網頁

https://des13.com/youtube/1585-youtube3.html

 

網站後台系統:全功能、簡單易用的理想選擇

https://des13.com/faq/cms/joomla/1566-backend.html

 

網頁設計 頁面編輯器 Page Builder :無需寫程式碼:輕鬆上手教學

https://des13.com/news/1563-page-builder.html

 

WordPress 操作實務:設計、教學、問答全包含

https://des13.com/faq/cms/wordpress/1607-wp1.html


推薦閱讀:全後台模組化形象官網

簡易電子書下載:一頁式網頁設計電子書

如果您喜歡我們的文章,歡迎分享!也歡迎查看我們的其他文章。如果有任何疑問也歡迎加line和我們聯絡

全後台模組化形象官網,符合各式商業模式與需求,請參考:https://des13.com/service/rwd.html

Written by Ring
作者:益盛科技 專案經理
通過Google Ads-Measurement Assessment
15年 網站專案管理及人員管理實務經驗。 
具網站美編企劃繪製能力
具多媒體網頁設計與 RWD設計之實務經驗

 

 

 

 

最新文章

原創、翻譯及轉貼的資訊都在這裡。

網站是實現夢想的工具! 開始準備建置您的網站了嗎? 加Line好友
益盛科技

我們重視設計質感與行銷價值

。網頁設計。程式設計。Joomla教學。

 

聯絡資訊

ring@des13.com

點此加我們LINE  @igodos 加line好友

406台中市北屯區文心路四段955號11樓之2(需預約諮詢)

04-37072202 /  0919-413187 

thedes13 

 
OMO電商 社群整合,輕鬆提升5倍轉換率,追蹤客戶行為,自動化行銷!想了解,快與我們聯絡! ×
點此加我們LINE 連結line帳號
DMC Firewall is developed by Dean Marshall Consultancy Ltd