在 CSS 中，100px 的邏輯長度在不同分辨率的手機屏幕上是否表現一致，取決于 設備的像素密度（devicePixelRatio） 和 視口（viewport）的縮放設置。以下是詳細分析：

---

1. 核心概念

• CSS 像素（邏輯像素）：
  CSS 中的 px 是 邏輯單位，與設備的物理分辨率無關，而是由瀏覽器根據 devicePixelRatio 動態映射到物理像素。
• 物理像素：
  屏幕實際發光的點（如 1080×2340 像素的屏幕）。
• 設備像素比（devicePixelRatio）：
  表示 物理像素 / 邏輯像素 的比值（如 iPhone 12 的 devicePixelRatio = 3）。

---

2. 不同場景下的表現

(1) 默認情況（無 viewport 縮放）

• devicePixelRatio = 1 的設備（如普通 PC 顯示器）：
  100px = 100 物理像素。
• devicePixelRatio = 2 的設備（如 iPhone 8）：
  100px = 200 物理像素（瀏覽器自動放大填充）。
• devicePixelRatio = 3 的設備（如 iPhone 12）：
  100px = 300 物理像素。

結果：

• 視覺大小一致：因為物理像素更密集，100px 在不同設備上看起來的物理長度（厘米/英寸）基本相同。
• 清晰度不同：高清屏（高 devicePixelRatio）顯示更細膩。

(2) 設置了 viewport 縮放

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 此時瀏覽器會 根據設備邏輯寬度（如 iPhone 12 的 390px 邏輯寬度） 調整 CSS 像素的渲染比例，確保 100px 在不同設備上視覺大小一致。

---

3. 關鍵影響因素

因素	對 100px 的影響	示例設備
devicePixelRatio	決定 CSS 像素映射到多少物理像素	iPhone 12（dpr=3）
viewport 設置	影響邏輯像素與設備寬度的比例	width=device-width
屏幕物理尺寸	相同分辨率下，屏幕越大，100px 物理長度越大	6.1 英寸 vs 5.4 英寸手機

---

4. 實際效果驗證

• iPhone 8（邏輯寬度 375px，dpr=2）：
  100px = 屏幕寬度的 100/375 ≈ 26.67%。
• iPhone 12（邏輯寬度 390px，dpr=3）：
  100px = 屏幕寬度的 100/390 ≈ 25.64%。

結論：

• 比例接近：雖然物理像素不同，但 100px 在視覺上占屏幕的比例相似（約 25%~27%）。
• 物理長度一致：因高清屏像素密度更高，實際顯示尺寸（毫米/英寸）幾乎相同。

---

5. 特殊情況與注意事項

1. Android 碎片化問題：
   • 部分安卓設備的 devicePixelRatio 可能是非整數（如 2.5、3.5），需測試適配。
2. 1px 邊框問題：
   • 高清屏上 border: 1px 可能過粗，需特殊處理（如 transform: scale(0.5)）。
3. 圖片模糊問題：
   • 若圖片物理像素不足（如 100×100 圖片在 dpr=2 設備上以 100px 顯示），會拉伸模糊。

---

6. 如何確保一致性？

• 使用相對單位（如 rem、vw）替代 px：

  html { font-size: 16px; }
  .box { width: 6.25rem; } /* 100px / 16px = 6.25rem */
  

• 響應式布局：

  @media (max-width: 768px) {.box { width: 50%; } /* 在不同寬度設備中自適應 */
  }
  

• 多倍圖適配：

  <img src="image@2x.png" width="100" height="100" srcset="image@1x.png 1x, image@2x.png 2x">
  

---

總結

• 視覺一致性：CSS 的 100px 在不同分辨率手機上的 物理顯示長度（厘米/英寸）基本一致，因為高清屏通過 devicePixelRatio 放大了物理像素。
• 比例差異：因設備邏輯寬度不同，100px 占屏幕寬度的比例可能有微小差異（需通過響應式布局優化）。
• 開發建議：優先使用 vw、rem 等動態單位，并針對高清屏提供多倍圖資源。