mobile_像素

document.documentElement.clientWidth       不包含滾動條

window.innerWidth                                            +滾動條

window.outerWidth                                            +瀏覽器邊框

window.width                                                     屏幕區域

 

IPhone 6 的 屏幕分辨率 爲 750*1334

IPhone 6 的尺寸 爲 4.7 英寸

IPhone 6 的 像素比 DPR 爲 2                              window.devicePixelRatio;

IPhone 6 的 獨立像素 爲 375*667                        window.innerWidth;

IPhone 6 的佈局(視口)像素爲 980*1743              document.documentElement.clientWidth

 

 

 

基礎知識

圖像其實都是由一個一個格子組成

像素比

 

• 屏幕尺寸
• 指的是屏幕的對角線長度，單位是 inch 英寸，1英寸 約等於 2.54 釐米

常見的屏幕有 2.4，2.8，3.5，3.7，4.2，5.0，5.5，6.0

IPhone4    3.5

IPhone6    4.7

IPhone6Plus    5.5

 

• 屏幕分辨率

IPhone6 的屏幕分辨率爲 750*1334

• 指在 橫 縱 向上的像素點數（物理像素，構成了屏幕的分辨率），單位是 px，1px = 1 個像素點，即 1 像素指的是物理設備的 1 個像素點
• 橫縱向上，指 xy 軸正方向
• 高清屏（視網膜屏）

 

• 屏幕像素密度 / 像素密度 / 屏幕密度 = 屏幕分辨率 / 屏幕尺寸 = (1080*1920)/5 = Math.sqrt(1080*1080+1920*1920)   /5 = 440 dpi 

屏幕上每英寸 能夠顯示的像素點的數量，單位是 ppi，即 "pixels per inch"，也有叫 dpi，都是由設備廠商規定的，不能進行修改

 

Mobile 相關

•  設備像素（物理像素）

屏幕上能顯示的最小粒度（能夠理解爲屏幕上最小的一個點） 

• 顯示設備中的一個最微小的物理部件
• 每一個像素能夠根據操做系統設置本身的顏色和亮度（手機亮度調節，其實就是調節每一個物理像素的亮度）
• 任何設備的物理像素 數量都是固定的

 

• css 像素

是一個抽象的單位，主要使用在瀏覽器上，用來精確的度量（肯定）Web 頁面上的內容

是由 Web 開發者 創造的，在 css 或者 JavaScript 中使用的一個抽象的層

通常狀況下，css 像素 被稱爲 與設備無關的像素（device-independent 像素），簡稱 "DIPs"

在一個標準的顯示密度下（普通屏），一個 css 像素 對應一個 設備像素

 

• css 像素 與 物理像素 之間的關係
• 一個 width 爲 200px 的元素，佔據了 200 個 css 像素
• 但這 200 個像素到底佔據了多少個 物理像素 ，取決於
• 屏幕特性（根據 像素比 區分）
  • 普通屏
  • 高清屏
• 用戶縮放行爲
  • 放大
  • 縮小

若是是普通屏， css 像素 / 物理像素 = 1

若是是高清屏， css 像素 / 物理像素 = 1 / 多

在蘋果的高清屏上，像素密度是普通屏幕的 2 倍，這個元素就跨越了 400 個設備像素，若是用戶放大，它將跨越更多的設備像素

 

• 設備獨立像素（密度無關像素）

也是由 設備廠商 規定的，是不可進行修改的

能夠認爲是計算機座標系統中的一個點

這個點表明一個能夠由程序使用的虛擬像素（好比 css 像素），而後由關係系統轉換爲 物理像素。

在某種條件下，設備獨立像素 會轉換爲 相應的 css 像素

 

 

• 位圖像素

一個位圖像素，是 柵格圖像（png，jpg，gif） 的最小數據單元

1 個位圖圖像 對應 1 個物理像素時，圖片是最清晰的。

 

 

• 對於 Web 開發者而言

咱們使用的 css 和 JavaScript 定義的像素，本質上表示的都是 css 像素

在開發過程當中，並不在乎 css 像素到底跨越了多少個設備像素，

這個依賴於 屏幕特性和用戶縮放行爲的複雜計算 交給了瀏覽器。

 

• 像素比（屏幕特性，高清屏仍是普通屏？）

像素比 DPR  = 設備物理像素 / 設備獨立像素

window.devicePixelRatio = 物理像素 / 獨立像素

若是 console.log(window.devicePixelRatio); 是 1 ，則是普通屏

IPhone 6 的 像素比 DPR 是 2

IPhone 6 Plus 和 IPhoneX 的 像素比 DPR 是 3