技術標籤：H5html5web app前端

文章目錄

• 前言
• 一、移動端螢幕相關概念
• • • 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開發技巧~