本篇文章總結各種畫素及聯絡和viewport視口
首先我們來談談最基礎的物理畫素。
物理畫素（裝置畫素）
物理畫素是真實存在的畫素，顯示裝置中一個最微小的物理部件，即螢幕上可以顯示的最小顆粒，在同一個裝置上，它的物理畫素是固定的，即一個裝置的解析度是固定的。 所謂的一倍屏、二倍屏，指的是裝置以多少物理畫素來顯示一個CSS畫素，越多的物理畫素去顯示一個css畫素就會提高其清晰度。
可以通過以下程式碼獲得螢幕真實物理畫素
window.screen.width //獲得螢幕水平方向上的畫素數
window.screen.height //獲得螢幕垂直方向上的畫素數
複製程式碼❝解析度：用畫素度量，表示螢幕水平和垂直方向的畫素數，解析度越高，畫素的數目越多，感應到的影像越精密
❞
在web開發中，可以使用px（畫素）、em、pt（點），in（英寸），cm（釐米）等作為長度單位。我們可以將上述單位劃分為相對長度單位和絕對長度單位。
相對長度單位：px、em 絕對長度單位：in、cm、pt
可以從下圖看出，螢幕都是3.5英寸，但是螢幕解析度卻相差一倍，有此我們可以看出，英寸是絕對長度，畫素是一個相對長度，畫素沒有固定的長度
由此，我們引出畫素密度的概念
畫素密度
一開始畫素密度DPI是應用於印刷業用來表示印表機每英寸可以噴出的墨汁點數，現在計算機借鑑了其概念，而最小的單位是畫素，可以用PPI值來表示螢幕每英寸的畫素數量，通過下圖我們可以很直觀的看到，都是一英寸的情況下，其物理畫素數量上的區別。 由此我們可以看出，畫素密度越高，說明單位尺寸內所能容納的畫素數量越多，顯示出來的畫面越清晰。
而我們常說的視網膜螢幕（Retina），知道是有較高PPI（大於320）的螢幕
那麼如何計算畫素密度呢？
公式：
例如：
iPhone3G/S的螢幕解析度是480x320px，而iPhone4/S的螢幕解析度是960x480px，螢幕尺寸都是3.5英寸，那麼我們可以通過勾股定理計算：
由上圖可以看出，iPhone4/S的畫素密度是iPhone3G/S的兩倍
至此我們瞭解了畫素密度對顯示清晰程度的影響，但是這又出現一個問題，低解析度和高解析度的裝置共存，就會引發一個問題，對於同一張圖片，低畫素的可以填滿整個區域，高畫素的無法填滿。這裡我們就需要引入一個新的單位，叫「裝置獨立畫素」
CSS畫素
也稱為裝置獨立畫素、邏輯畫素、裝置無關畫素，IOS稱之為PT，Android稱之為DIP或DP，預設情況下在PC端等於一個物理畫素，通過瀏覽器的縮放，會出現大於小於等於的三種情況
裝置畫素比（Device Pixel Ratio, DPR）
一個裝置的物理畫素與邏輯畫素之比：裝置畫素比 (dpr)＝ 物理畫素(dp) / 裝置獨立畫素(dip)
可以通過以下程式碼獲得，裝置上物理畫素和裝置獨立畫素的比例
window.devicePixelRatio
複製程式碼在Retina屏的iphone上，devicePixelRatio的值為2，也就是說1個css畫素相當於2個物理畫素。通常所說的二倍屏(retina)的dpr是2, 三倍屏是3。 可以通過獲取比例來進行相應處理。即可以通過獲取對應的比例來使圖片放大到對應的比例
但是這又引發一個問題，圖片放大，會降低精度。
由此我們引入「二倍圖」的概念，可以通過二倍圖或者三倍圖，將原圖片進行縮小，以保持其精度。
「看完畫素這部分，我們再來看看移動端最重要的視口」
視口（viewport）
PC端的viewport的大小取決於瀏覽器的大小，以CSS畫素為單位 可以通過以下程式碼獲得html元素的大小，即PC端viewport的寬高：
document.documentElement.clientWidth
document.documentElement.clientHeight
複製程式碼❝提示：如果調整瀏覽器的寬度，viewport的寬高就會跟著改變
❞
視口這個概念更多的應用於移動端
（1）layout viewport（佈局視口）
指的是我們可以進行網頁佈局區域的大小，以CSS畫素做計量單位。移動裝置預設會設定一個較大的viewport（如IOS一般預設是980px），layout viewport 的寬度是大於瀏覽器可視區域的寬度的。
layout viewport的寬度可以通過 document.documentElement.clientWidth來獲取。
document.documentElement.clientWidth
document.documentElement.clientHeight
複製程式碼（2）visual viewport （視覺視口）
即裝置的畫素解析度，以iphone8為例，解析度為750*1334畫素 visual viewport的寬度可以通過window.innerWidth來獲取。
window.innerWidth
window.innerHeight
複製程式碼這裡簡單看一下佈局視口和視覺視口的區別：
（3）ideal viewport（理想視口）
ideal viewport是一個能完美適配移動裝置的viewport。無論是在何種密度螢幕，何種解析度下，顯示出來的大小都差不多。ideal viewport並沒有一個固定的尺寸，不同的裝置有不同的ideal viewport。理想視口與裝置的寬度一致，例如iphone8的理想視口是375px
ideal viewport 的意義在於，無論在何種解析度的螢幕下，針對ideal viewport 而設計的網站，不需要縮放和橫向滾動條都可以完美地呈現給使用者。
window.screen.width
window.screen.Height
複製程式碼翻轉螢幕
當你拿著手機螢幕進行翻轉的時候：
如果visual viewport 的寬度 > layout viewport 的寬度，那麼viewport需要zoom in（放大，拉近）,以適應visual viewport的寬度
如果visual viewport 的寬度 < layout viewport的寬度，那麼viewport需要zoom out（縮小，拉遠），以適應visual viewport的寬度
<meta name="viewport" content="width:device-width">
複製程式碼device-width會將手機橫向物理畫素/轉化系統作為其值，並重置相應的layout viewport的值，並適應visual viewport。
meta標籤作用
利用meta標籤對viewport進行控制
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
複製程式碼在蘋果的規範中，meta viewport 有6個屬性如下：
| 引數 | 含義 |
|---|---|
| width | 設定layout viewport 的寬度，為一個正整數，也可為字串"width-device"，一般為字串"width-device" |
| initial-scale | 設定頁面的初始縮放值，為一個數字，可以帶小數，一般為1.0 |
| minimum-scale | 允許使用者的最小縮放值，為一個數字，可以帶小數，一般為1.0 |
| maximum-scale | 允許使用者的最大縮放值，為一個數字，可以帶小數，一般為1.0 |
| user-scalable | 是否允許使用者進行縮放，值為"no"或"yes", no 或0代表不允許，yes或0代表允許 |
| height | 設定layout viewport 的高度，這個屬性對我們並不重要，很少使用 |
❝由於initial-scale = ideal viewport /layout viewport 也就相當於設定width=device-wdith，但是為了解決一些相容性問題比如iphone、ipad以及IE 會橫豎屏不分，會選擇將兩個屬性都寫上
❞
最後總結
「物理畫素」是真實存在的，但是沒有固定的長度，在螢幕大小相同情況下，螢幕的物理畫素越多，圖片越清晰，也就是「畫素密度」越高，圖片越清晰； 為了解決不同螢幕的解析度高低問題導致的圖片大小不同，引入了「CSS畫素」，由此推算除「裝置畫素比」，也就是物理畫素與CSS畫素的關係，當裝置畫素比為2時，二倍屏下的1個css畫素相當於2個物理畫素，那麼我們就採用「二倍圖」並縮小一倍的方式來保證圖片精度及大小。
視口的話分為三種「layout viewport」、「visual viewport」 、「ideal viewport」，deal viewport是一個能完美適配移動裝置的viewport。
「meta標籤」推薦寫法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
複製程式碼❝本篇文章參考資料： https://www.cnblogs.com/jianxian/p/11178378.html https://blog.csdn.net/zhouziyu2011/article/details/60570547 https://www.cnblogs.com/2050/p/3877280.html https://blog.csdn.net/weixin_34348174/article/details/87962105 https://segmentfault.com/a/1190000006068808 https://segmentfault.com/a/1190000011586301
❞
「有用的話點贊謝謝」