文章目錄

• 前言
• 一、移動端屏幕相關概念
• • • 1. 屏幕尺寸
    • 2. 屏幕分辨率
    • 3. 屏幕像素密度（ppi = pixels per inch）
• 二、像素
• • • 1. 物理像素
    • 2. CSS像素
    • 3. 設備獨立像素
    • 4. 位圖像素
    • 5. 像素比 （dpr）
• 三、視口
• • • 1. 布局視口
    • 2. 視覺視口
    • 3. 理想視口
• 三、縮放行為
• • • 1. 用戶縮放
    • 2. 系統
• 總結

---

前言

隨著移動端H5需求場景越來越多，例如微信公眾號中H5頁面的開發，APP中內嵌H5頁面等，移動端H5開發基礎知識和技巧是前端開發工程師必備的技能~

---

一、移動端屏幕相關概念

1. 屏幕尺寸

手機屏幕對角線的長度，單位：英寸，1英寸=2.54厘米

2. 屏幕分辨率

橫縱向上的像素點（物理像素）數（個數），1px=1個像素點，也稱物理像素，例如iphone6的屏幕分辨率為：750*1336

3. 屏幕像素密度（ppi = pixels per inch）

與【屏幕尺寸】和【屏幕分辨率】有關，即每英寸所擁有的像素數量，決定了手機清晰度。

二、像素

1. 物理像素

屏幕分辨率，是呈像的最小單位

2. CSS像素

• web開發的最小單位，一個CSS像素在移動設備上最終會轉成物理像素去呈像
• 一個CSS像素占用多少個物理像素，取決于【設備特性】、【用戶縮放行為】

3. 設備獨立像素

• 是一個抽象層，是設備對接CSS像素的接口，一旦CSS像素與設備獨立像素掛鉤（width=device-width），dpr才有意義。
• 在PC web開發中無意義，無此概念。

4. 位圖像素

1個位圖像素對應一個設備獨立像素，圖片才能完美清晰的展現

5. 像素比 （dpr）

• 【單方向】占滿屏幕物理像素個數/ 占滿屏幕設備獨立像素個數 = devicePixelRatio
• 獲取像素比：window.devicePixelRatio
• iPhone6 物理像素（分辨率）是750，設備獨立像素是375，dpr=2

三、視口

1. 布局視口

• 決定網頁布局
• 由于布局寬度大于大部分手機屏幕的寬度，為了將頁面顯示完全，只能對原來的頁面進行縮放，不然就需要左右拖動來瀏覽。（大部分瀏覽器默認采用縮放方式）
• document.documentElement.clientWidth 布局視口寬度，無兼容性問題

2. 視覺視口

• 用戶正在看到的網頁的區域
• 縮小頁面，看到的網站區域將變大，視覺視口也會變大；同理，放大網站，網站區域將縮小，此時視覺視口也會變小。
• var visual = window.innerWidth 視覺視口，接近全部支持

3. 理想視口

• 布局視口和視覺視口一樣大
• 設置如下：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

三、縮放行為

1. 用戶縮放

• 用戶手動放大：1個CSS像素面積變大，區域內CSS像素個數減少，視覺視口尺寸變小
• 移動端，用戶縮放影響視覺視口的尺寸（布局視口影響布局（塊換行等），引起重繪等，所以改變的是視覺視口）

2. 系統

• 參照理想視口進行縮放，改變布局視口和視覺視口
• meta: initial-scale=1.0

---

總結

移動端和PC端比，有很多特有的概念需要理解。理解了這些基礎概念，才能掌握移動端H5開發技巧~

總結

以上是生活随笔為你收集整理的移动端H5开发基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。