設備像素，設備獨立像素，CSS像素 & meta viewport

前言

學習移動端開發是總會遇到這樣的問題，不如就一次性把這些問題弄清楚，這邊文章是轉載別的的，覺得很有用就轉載過來了。勿噴！！！

這兩個屬性說難不難，說容易又不易容。但如果你弄明白了這個，你就明白了一些東西，一些你常常用但卻不知道爲什麼的代碼。下面我們還是先從它們各自的定義開始說起，其實雖然標題裏是三個名詞，但我們接下來只聊兩個就可以了，爲什麼？看完你就知道了。

基本定義

設備像素：設備像素又稱物理像素（physical pixel），設備能控制顯示的最小單位，我們可以把這些像素看作成顯示器上一個個的點。

CSS像素：CSS像素是Web編程的概念，獨立於設備的用於邏輯上衡量像素的單位，也就是說我們在做網頁時用到的CSS像素單位，是抽象的，而不是實際存在的。

設備獨立像素：(也叫密度無關像素)，可以認爲是計算機座標系統中的一個點，這個點代表一個可以由程序使用並控制的虛擬像素(比如：CSS 像素,只是在android機中CSS 像素就不叫”CSS 像素”了而是叫”設備獨立像素”)，然後由相關係統轉換爲物理像素。
所以說，物理像素和設備獨立像素之間存在着一定的對應關係，我們會在接下來的篇幅中說到它們。

通過上面的定義我們就可以從中挑出兩個來展開就可以了，也就是設備像素和設備獨立像素（在本文我們不妨假裝Android的“設備獨立像素”是通用叫法），正如你所看到的，因爲設備獨立像素已經包括了CSS 像素。

在PC端可以通過screen.width/height屬性來獲取設備獨立像素值，在PC端這個值把它當成我們常說的屏幕分辨率（實際上它不是，但是由於在PC端設備像素和設備獨立像素數值相等，纔有這麼一個不準確的說法）。但你把瀏覽器切換到設備模式時，也就是在移動端環境下通過上面的screen.width/height獲取的不是移動設備的分辨率，而是移動設備的屏寬/高（這裏只是猜測），如：Iphone 5s下screen.width =320、screen.height = 568。本以爲是瀏覽器裏的設備環境沒有完全模擬真實的移動設備環境，可是用真機測試時，還是出現同樣的結果screen.width =320、screen.height = 568。值得注意的是：不管你手機是否切換到橫屏，這兩個值還是一樣的。所以不管是移動端還是PC端通過screen.width/height獲取的這個值是設備獨立像素（CSS 像素），而不是設備的屏幕分辨率，因爲設備的屏幕分辨率對於WEB開發者來說是無法通過代碼來獲得的，是完全透明的。

兩者之間的關係

在一定的條件下兩者它們兩者是可以相等的，比如：在PC端瀏覽器默認情況下（100%，即頁面沒被縮放），一個物理像素 = 一個設備獨立像素。而在移動端可就不一樣的，這兩個值很多時候是不相等的。爲什麼會不相等，因爲爲了讓你看起來更爽，爽在哪裏？就是畫質的精細度。即使它們有關係，但又不相等，那麼總得有個說法或者公式吧？別急，在這之前，我們還得認識個東西叫PPI。

PPI又是個什麼東西？總之它是個好東西，不然爲什麼各品牌的手機商開發佈會時常常掛在嘴邊。PPI 全稱是（pixel per inch）翻譯下就是每英寸內有多少個像素點，這個像素點指的是設備像素點（物理像素），說得接地氣點PPI就是像素密度（pixel density）。PPI的值越高，畫質越好，也就是越細膩，看起來更有逼格。那麼PPI是怎麼算出來的呢？我來看看它的公式。

我們不妨用上面的這個公式做做數學題

結果應該跟紅框中的一樣吧？實際上會有零點幾的出入，但這沒關係。例如你用Iphone 6 來算時得出的結果：325.6122832234167 。

好了我們還是回到上面的問題：兩者（設備像素和設備獨立像素）是如何進行換算的？它們是通過設備像素比(dpr,device pixel ratio)來進行換算的。那麼什麼是設備像素比呢？

設備像素比

定義

1. 設備像素比 = 設備像素/設備獨立像素 // 在某一方向上，x方向或者y方向

那麼現在問題來了，什麼是設備獨立像素呢？上面不是說過了嗎？但我覺得再重複一篇也不爲過。
設備獨立像素（DIP，device-independent pixel，density-independent pixel），簡單地來說設備獨立像素就是：獨立於設備的用於邏輯上衡量像素的單位。

邏輯上衡量像素的單位？這不就是說CSS 像素嗎？沒錯就是它。好下面我們就來接着講。

我想現在“設備獨立像素”和“CSS像素”的關係已經狠狠地印在你的腦子裏了吧！

如何獲取

你可以通過JavaScript 中的window.devicePixelRatio來獲取設備中的像素比值。

爲了讓大家更容易區分和理解，我們不妨把設備像素叫做設備光點。那麼這個設備像素比有什麼用呢？

它可以告訴你一個設備光點對應多少個像素點。還有一個東西我們明白了對於理解這個設備像素比會有幫助。設備光點的大小是固定的，是不可變的，而設備獨立像素是可以被拉長或者被壓縮的。這個要怎麼理解呢，我們不妨來看看三個圖，看完後相信你會明明白白的。

• 標準PPI（160）下的設備像素比
• 經放大後的設備像素比圖示
• 經縮小後的設備像素比示圖

注：深色爲設備光點，淺色爲設備獨立像素

看完這三個圖後我們可以得到如下結論：

一個設備光點可以對應一個CSS 像素（PPI = 160時）；
一個設備光點可以對應多個CSS 像素（縮小）；
一個CSS像素可以對應多個設備光點（放大）；

下面我們來看個現實中的例子，Iphone 5s 使用的是 Retina 視網膜屏幕，什麼是Retina視網膜屏幕？PPI 值超過 300 的叫做超高密度屏幕，只是 Apple 給它換了個高大尚的名稱：Retina 視網膜屏幕而已。

在做移動頁面開發的時候，相信你經常會遇到這種情況：在不同的手機上看時，裏面的圖片、文字或者線的大小會不一樣，有時候大小區別還非常地大。原因就是剛纔說到的設備像素比在作怪。

你想啊，如果在普通屏即標準 PPI下一個設備光點對應一個 CSS 像素時，頁面不大不小，完美地渲染出來了。但在現在這個高逼格的年代，標準 PPI 已經很少見了。更多的是 Retina視網膜設備。而設備像素比不同的品牌的手機這個值也是不一樣的。即使是同一個品牌的手機也不一樣。你比如 Iphone 5s 設備像素比爲2，Iphone 6s 設備像素比爲3。至於安卓機中的設備像素比就更多了，有1.3、1.5、2、3等等。

 

 

meta viewport 你真的瞭解嗎？

 

前言

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

上面是一行我幾乎每天都用到的代碼，它給我們帶來的好處是非常明顯的，一眼就可以看到的，除了這一點，我對它就一無所知了，我天真地以爲只要認識它能給我實現什麼樣的效果就足夠了，可事實卻告訴我：“你這小子也太天真了，你千萬別被網上一大堆的搜索結果騙了，雖然幾乎所有的搜索結果長得都像孿生兄弟甚至一模一樣，我相信他們也並沒有說謊，但也請你相信我，他們只是在騙自己”。在文章的開頭我們不妨看看網上一堆關於 meta 中name=”viewport” 的介紹，但我不想重新他們的話，可是不寫又不行，那麼好吧，我向你們低頭了，但我這人有個小毛病，就是當我有的東西你也有的時候，我會把它做得比你更出色。好吧，我承認我剛纔在吹牛逼，我們馬上進入正題。

基本定義

如果你有在網上搜索過 name=”viewport” 的話，相信你對這個基本的定義已經有大概的瞭解，但好事不嫌多，少看一次不如再看一次。

Viewport 有道詞典的解決是視口，觀察孔的意思，那麼在這裏我們要怎麼解釋呢？這是一個問題，但這個對於我們理解 什麼是Viewport 也沒有多大作用，但作爲中國人把它翻譯成中文還是有必要的，我們不妨把 Viewport 叫作視窗。爲什麼是它，其實也沒什麼就是喜歡。

很多書籍把它翻譯成視口，但有沒有書把它翻譯成視窗，這個就不知道了，畢竟是我自創的。所以以後不管你看到視口，還是視窗，它指的就是一個東西 Viewport 。

這個meta 標籤是由蘋果發明的，後明就慢慢地被其他的生產產商所接受了。於是就不知不覺地流行了起來。

Viewport 有幾個屬性你需要了解的

width：控制 viewport 的大小，你可以給它指定一個值，如：600，或者甚至還可以給它一個特殊的值，如：device-width，device-width爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。
height：與 width 相對應，指定viewport 高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：是否允許用戶手動縮放。

看完上面的幾個屬性是不是覺得對 viewport 理解了，甚至覺得在viewport 的世界裏如魚得水。如果我對你說這只是 viewport 之旅的開始，你會不會覺得生活不再美好了？且慢，我們不妨一步一步來？
上面所說的其實只是 viewport 的基本概念，一點點皮毛而已，如果要對其作深入的瞭解，我們還得專門拿出點時間來跟他耗耗。

三個視窗

Viewport 雖然它只是一個單詞，但它卻囊括了三個方面。是哪三個方面呢？Viewport 分爲：視覺視窗、理想視窗、佈局視窗。怎麼樣這會兒傻眼了吧？寶寶不用怕，我們一個一個來。

視覺視窗

所謂的視覺視窗說白了就是設備的屏幕區域，換句話說就是用戶通過屏幕所看到的頁面內容。但它所對應的並不是指屏幕區域裏的物理像素，而是CSS 像素。並且它所包含的 CSS 像素的數量也是隨着用戶縮放而有所改變。如果你想了解更多 CSS像素和設備像素（物理像素）的關係，你可以前往《設備像素，設備獨立像素，CSS像素》進行深入瞭解。

理想視窗我們可以通過window.innerWidth | window.innerHeight來獲得理想視窗對應的寬和高。

佈局視窗

佈局視窗跟視覺視窗不一樣，它不是指設備屏幕區域，它是爲了解決PC 端網站在移動端顯示不佳的一個解決方案。佈局視窗通常比設備屏幕寬得多，一般爲980px，但也不是唯一，在不同的瀏覽器中也會有所不同如：在Safari iPhone中佈局視窗的寬爲980px，在Opera中佈局視窗寬爲850px ，在Android WebKit 中而已視窗寬爲800px，而在萬惡的IE中佈局視窗寬爲974px。說了一堆，這個而已視頻到底是個什麼玩意呢？我們來看一個圖我想你就應該明白了。

我們可以通過document.documentElement.clientWidth | document.documentElement.clientWidth來獲得佈局視窗的寬和高。
注意：佈局視窗的寬高值是在頁面沒添加viewport 時所獲得的值。如果你給頁面添加了viewport 並且 設置了width = device-width 時，通過上面的代碼所獲得的值就不是佈局視窗的默認值了。

理想視窗

這個理想視窗是爲了佈局視窗而生的，爲什麼這麼說，因爲它是基於佈局視窗的。他其實就是變了尺寸的佈局視窗。理想視窗就是把佈局視窗調整到合適的狀態，讓頁面有最好的表面效果，這也是它名字的由來。設置了理想視窗用戶就不再需要對頁面進行縮放，因爲瀏覽器已經幫你把頁面調整到最佳的顯示狀態了。而你要做的就是告訴瀏覽器，你要他這麼做就OK了。就下面這一段代碼就可以讓瀏覽器乖乖地把佈局視窗調整到最理想的狀態

當然了，如果你的網站是PC端的或者沒有作響應式處理的。雖然佈局視窗已經調整到最佳顯示狀態，但你所看到的網頁還不是你想要的，因爲整個PC頁面都壓縮到理想視窗大小了，內容基本都看不清。所在理想視窗是會對於移動頁面的，這個要在移動設備上才能看到效果，如果在PC上通過瀏覽器的設備模式查看的話頁面是不會擠在一起的，你能看到的是頁面的一個部分，你可以通過滾動來查看頁面中的不同區域。

閒言碎語

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

對於這行代碼我們是不是每次都得把這五個屬性都寫上呢？答案肯定是否定的，例如：如果你添加了user-scalable=no 那麼，minimum-scale=1, maximum-scale=1這兩個屬性就沒必要追加了。因爲你都已經禁止了用戶縮放頁面了，允許的縮放範圍也就不存在了。但我們可以像下面這樣使用屬性的搭配來巧妙地實現禁止用戶縮放頁面的功能。

1. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes">

1. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

上面這兩段代碼效果是一樣的，都是不允許用戶手動縮放頁面，只是在原理上有所區別。那麼現在問題來了，既然有了user-scalable=no我們也沒必要辛苦自己寫成minimum-scale=1, maximum-scale=1, user-scalable=yes。

這裏有一點需要注意一下，理想視窗會隨設備轉向而改變。什麼意思？
我們拿Iphone 5s 來舉個例子。Iphone 5s 尺寸爲320*568。在豎屏模式下寬度爲320px，而在橫屏模式下寬度爲568px。