window.devicePixelRatio 獨立像素比（經典文章+原創）

設備像素/物理像素
設備像素也被稱爲物理像素,他是顯示設備中一個最微小的物理部件。
屏幕密度
一般以每英寸有多少物理像素來計算（PPI）。
獨立像素/CSS像素
CSS像素是一個抽象的單位，主要使用在瀏覽器上，用來精確的度量（肯定）Web頁面上的內容。
通常狀況下，CSS像素被稱爲與設備無關的像素（device-independent像素），簡稱爲「DIPs」。在一個標準的顯示密度下，一個CSS像素對應着一個設備像素。

<div style="width:320px; height：320px;background-color:blue;"></div>

就拿上面的代碼來講（在頭部沒有加入<meta name="viewport" content="width=device-width">），在電腦端和手機端顯示，結果是

出現這樣的緣由是由於電腦端顯示設備的物理像素（液晶顯示管）比較大，而手機的比較小，（生活中你能夠發現電腦和手機都要存放不少液晶顯示管，區別就是電腦的屏幕大，手機屏幕小）因此結果是一樣要用200個物理像素結果就不同了。
以上兩張圖片顯示的結果是css樣式的結果。

獨立像素比/window.devicePixelRatio
window.devicePixelRatio=物理像素/獨立像素。
經過計算你會發現剛纔的兩種手機的結果分別是1或者2（固然還有其它手機屏幕結果有些差異）

呵呵........
接下討論一下，要想讓手機顯示上顯示的結果和電腦同樣大怎麼辦，所謂的同樣大是，就是你用一把尺子量一下，電腦上長度和寬度各是200，手機上長度和寬度也各是200，也就是給人的視覺效果是同樣大。

手機屏幕分爲：
一：非視網膜屏幕（物理像素320，該設備的獨立像素（視區寬度）也是320）
二：視網膜屏幕（物理像素640，該設備的獨立像素（視區寬度）仍是320，剛纔手機顯示的結果用的就是用的這個手機）

<meta name="viewport" content="width=device-width">
這個代碼的做用就是讓視圖區域撐滿手機物理屏幕。

html文件頭部加上這個代碼後，手機顯示的大小和電腦顯示的大小尺寸大小就同樣了。
可是手機上顯示的圖片就模糊了，這是由於你要顯示一樣的物理大小，視網膜屏幕就要用雙倍的物理像素來顯示（一個一像素的圖片，若是用瀏覽器4個像素（即放大了一倍）來看會變模糊和失真，因此在給手機作圖片的時候，要放大一倍，就是在手機上顯示的圖片是100乘以100，那ps作圖片要作成200乘以200這樣纔會清晰）。

哈哈.....
歡迎指正。
看到網上不少的文章看的我好暈，還說若是以爲文章就給他打賞，我他媽的看的頭昏眼花尚未叫他賠錢呢。
你們若是以爲個人文章寫到你的痛點了，或者有用請打賞。微信:youronglang 或者買點我自家代理的酒 關注微博：匠心酒