文章目錄

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

---

前言

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

---

一、移動端屏幕相關(guān)概念

1. 屏幕尺寸

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

2. 屏幕分辨率

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

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

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

二、像素

1. 物理像素

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

2. CSS像素

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

3. 設(shè)備獨立像素

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

4. 位圖像素

1個位圖像素對應(yīng)一個設(shè)備獨立像素，圖片才能完美清晰的展現(xiàn)

5. 像素比 （dpr）

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

三、視口

1. 布局視口

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

2. 視覺視口

• 用戶正在看到的網(wǎng)頁的區(qū)域
• 縮小頁面，看到的網(wǎng)站區(qū)域?qū)⒆兇?#xff0c;視覺視口也會變大；同理，放大網(wǎng)站，網(wǎng)站區(qū)域?qū)⒖s小，此時視覺視口也會變小。
• var visual = window.innerWidth 視覺視口，接近全部支持

3. 理想視口

• 布局視口和視覺視口一樣大
• 設(shè)置如下：

<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像素面積變大，區(qū)域內(nèi)CSS像素個數(shù)減少，視覺視口尺寸變小
• 移動端，用戶縮放影響視覺視口的尺寸（布局視口影響布局（塊換行等），引起重繪等，所以改變的是視覺視口）

2. 系統(tǒng)

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

---

總結(jié)

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。