作為前端的你不能不知道的知識，總結各種畫素及聯絡和viewpor視口

本篇文章總結各種畫素及聯絡和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個屬性如下：

❝

由於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

❞

「有用的話點贊謝謝」