當前位置：首頁 >

移动端像素概念，viewport，适配

發布時間：2025/3/21 57 豆豆

生活随笔收集整理的這篇文章主要介紹了移动端像素概念，viewport，适配小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

想必大家對移動端像素的概念比較疑惑，總結一下我們經常會聽到的幾個詞。

一、屏幕尺寸

平時我們通常提到手機的尺寸，比如iPhone6是4.7英寸的。手機的屏幕是以英寸為單位的。我們平時使用最多的單位是：毫米、厘米、米。對于英寸并不熟悉，首先我們先來換算一下單位：1英寸（inch）=2.54厘米（cm）。那么，英寸到底表示的是什么呢？是手機的寬還高？原來英寸代表的意思是：手機屏幕對角線的長度。

常見的屏幕尺寸有：2.4、2.8、3.5、3.7、4.2、5.5、5.6等

二、屏幕分辨率

指在橫縱向上的像素點數，單位是px。1px=1個像素點數（注：這里的像素指的是物理設備的1個像素）。

一般以縱向像素 * 橫向像素表示一個手機的分辨率。比如：1980*1080

在同一個設備上，它的像素個數是固定的，這是廠商在出廠時就設置好了的。只有不同的設備之間，才有像素大小的區別。

這里有人提出一個問題：既然在同一個設備上，像素點數早就設定好了，那電腦上可以調整分辨率是怎么回事？

其實，當我們調整電腦分辨率的時候，無論怎么調，像素點數還是那么多。

入上圖我的電腦所示，系統推薦的是1920x1080 px的分辨率，這表示什么意思呢？剛才我們也提到了，微軟在這塊屏幕上橫向設置了1080個像素，豎向設置了1920個像素。無論怎么調整，這個數字是不會變了。那么，為什么我們還能調整分辨率呢？比如我們調整到1336x760，按照定義，橫向就是760個像素，豎向就是1336個像素了。其實呢，你把分辨率調成1336x760，系統就會分配給你1336x760有效像素個數，也就是真實的色彩塊。其他的個數呢，就由系統自作主張，通過一系列運算給你一個模擬色彩塊，填充成正好1920x1080 個色彩塊。這些拿來充數的像素塊，和真實的像素塊放到一起，我們不易察覺。

蘋果系列手機分辨率：

型號屏幕分辨率PPI

3GS	320x480	163
4s	640x960	326
5c	640x1136	326
5s	640x1136	326
6	750x1334	326
6+	1242x2208~1080x1920	401

注：屏幕大小和分辨率是沒有關系的，屏幕大的分辨率不一定。

我們知道蘋果手機是從4s開始火起來的，因為它使用了高清屏。那么什么是高清屏呢？

三、高清屏

高清屏（Retina）的概念，主要是從喬布斯發布的Retina設備開始的，Retina顯示屏又叫做視網膜屏。事實上，Retnia這個詞更接近于一個營銷名詞而非技術名次。因為從某種意義上來說，這是蘋果為宣傳自己的產品所創造出的名詞。蘋果也的確為這個名詞申請了專利。

主要功能：

把更多的像素點壓縮至一塊屏幕上，具備足夠高的物理像素密度從而使人體肉眼無法分辨其中單獨像素點的液晶屏。

特點：

一種具備超高像素密度的液晶屏。
同樣大小屏幕上顯示的像素點由一個變成多個。

高清屏和普通屏的區別：

高清屏（Retain）和普通屏相比，相同區域的物理像素點數，高清屏是普通屏的4倍。
高清屏的筆記本電腦色彩保真特點的全面展現

四、屏幕像素密度（PPI）

屏幕像素密度也叫像素密度或屏幕密度

屏幕像素密度，即屏幕上每英寸可以顯示的像素點的數量，英文pixels per inch，簡稱PPI。這個英寸跟之前手機屏幕的尺寸一樣，也是對角線的長度。所以我們可以這么理解屏幕像素密度，即在一個對角線長度為1英寸的正方形內所擁有的像素數。

屏幕像素密度與屏幕尺寸和屏幕分辨率有關。他們之間有一個公式：

這個公式真是簡單明了，我們還是以iPhone6手機為例，它的尺寸為4.7英寸，分辨率為750px*1334px。套用一下公式計算一下，最后得出的PPI，結果是325.6122832234167，四舍五入326和上面表格的值就一樣了。

五、物理像素（device pixels）

物理像素又稱設備像素，顧名思義，顯示屏是由一個個物理像素點組成的，通過控制每個像素點的顏色和亮度，使屏幕顯示出不同的圖像，屏幕從出廠那天，它的物理像素點就固定不變了，單位pt。它是顯示設備中最小的物理部件。

買手機的時候會有nxm`的分辨率，那是屏幕nxm個呈像點。一個點（小方格）為一個物理像素，它是屏幕能顯示的最小粒度。

任何設備的物理像素的數量都是固定的，任何一款設備上物理像素的大小是不會改變的。不同設備上物理像素的大小可能不同。

六、css像素

在做web頁面的時候，我們經常為一個元素設置大小，比如：

div{width:200px;height:200px;background:pink; }

那么什么是css像素呢？

css像素是個抽象的單位，主要使用在瀏覽器上，用來精確的度量（確定）web頁面上的內容。它是為web開發者創造的，在css或者JavaScript中使用的一個抽象層。一般情況下，css像素被稱為與設備無關像素（device-independent）簡稱為：DIPS。在一個標準的顯示密度下，一個css像素對應一個設備像素（物理像素）。css是一個抽象單位，因為呈像的時候需要在設備上呈像，到底呈現出來是什么樣子與一個css像素包含多少個物理像素有關。css像素是瀏覽器特有的概念。

物理像素與css像素的關系：

如上樣式所示：一個width為200px的元素，它占據了200個css像素，但200個css像素占據了多少個物理像素取決于屏幕的特性（是否是高密度，即像素比）和用戶的縮放行為。

如果在iPhone的視網膜屏上，視網膜的像素密度是普通屏幕的兩倍，這個時候200px個css像素就跨越了400個設備像素。如果用戶放大，它將跨越更多的設備元素。

假設我們用PC瀏覽器打開一個頁面，瀏覽器此時的寬度為1000px，頁面上同時有一個500px寬的塊級元素容器。很明顯此時塊狀容器應該占頁面的一半。

但如果我們把頁面放大（通過“Ctrl鍵”加上“+號鍵”），放大為200%，也就是原來的兩倍。此時塊狀容器則橫向占滿了整個瀏覽器。

此時我們既沒有調整瀏覽器窗口大小，也沒有改變塊狀元素的css寬度，但是它看上去卻變大了一倍——這是因為我們把CSS像素放大為了原來的兩倍。

也就是說默認情況下一個CSS像素應該是等于一個物理像素的寬度的，但是瀏覽器的放大操作讓一個CSS像素等于了兩個設備像素寬度。在高PPI的設備上，CSS像素甚至在默認狀態下就相當于多個物理像素的尺寸。

七、設備獨立像素

設備獨立像素也稱為密度無關像素，可以認為是計算機坐標系的一個點，這個點代表可以由程序使用的虛擬像素（比如：css像素），然后由相關系統轉化為物理像素。是設備對接css像素的接口，一旦css像素與獨立設備像素聯系起來（width=device-width）此時像素比才能真正發揮作用。

設備獨立像素有什么用？

可以把它看成是設備提供出來的接口，它用來對接應用的一些概念：比如瀏覽器中的css像素。只有當瀏覽器廠商對接上獨立像素時，瀏覽器廠商設計的移動端規則才能發揮作用。否則采用默認的規則。

設備獨立像素在哪里能看到呢？

我們可以F12打開瀏覽器，切換到移動端，此時，顯示的值就是設備獨立像素。

八、位圖像素

一個位圖像素是柵格圖像（比如：png、jpg 、gif）等，最小的數據單元。

一個位圖像素對應一個物理像素，圖片才能得到完美清晰的展示。

九、設備像素比(DPR)

官方定義：設備物理像素和設備獨立像素的比例。英文：device pixels ratio也就是:

device pixels ratio = 物理像素/設備獨立像素

可以通過 window.devicePixelRatio 來獲取，比如：

console.log(window.devicePixelRatio)

在iPhonex下面結果為：3

這個比值是個具體的數，也就是說在iphoneX中，物理像素 = 3倍設備獨立像素。

在iPhone6中就不一樣了：如圖所示：

占據一塊iPhone 6的屏幕需要750x1334個物理像素。

占據一塊iPhone 6的屏幕需要375x667個設備獨立像素。

也就是說1個設備獨立像素=4倍物理像素（面積）。

所以我們可以簡化成下面的表示方法：

設備像素比=一個方向上占滿一塊屏幕需要的物理像素個數/一個方向上占滿屏幕需要的設備獨立像素的個數。

當我們寫上meta標簽后，width=device-width 使css像素和設備獨立像素聯系了起來，即css像素等于設備獨立像素。在iPhone6下，即：

1css像素=4倍物理像素

10、像素總結

現在我們了解了四個像素分別是：物理像素、css像素、位圖像素和設備獨立像素。

物理像素：是設備呈現出的最小單元
位圖像素：是圖片的最小單元
css像素是瀏覽器上的一個抽象單位
設備獨立像素也是一個抽象的層，是設備提供出來的接口
像素比：物理像素/設備獨立像素

由于物理像素、設備獨立像素，像素比都是設備中的概念，與瀏覽器沒有關系，在設備出廠的時候這些參數都已經固定了。所以在默認情況下，設備獨立像素和像素比在web開發中沒有意義。

對于web開發來說，我們使用的每一個css和JavaScript定義的像素本質上代表的都是css像素，我們在開發中并不在意一個css像素到底跨越了多少個物理像素。我們將這個依賴于屏幕特性和用戶縮放程度的復雜運算交給了瀏覽器。

11、視口

移動端瀏覽器廠商面臨的問題：

他們如何將數以萬計甚至數以億計的PC端網頁完整的呈現在移動端設備上？并且不會出現橫向滾動條？

三個viewport的理論：

首先，移動設備上的瀏覽器認為自己必須能讓所有的網站都正常顯示，即使是那些不是為移動設備設計的網站。但如果以瀏覽器的可視區域作為viewport的話，因為移動設備的屏幕都不是很寬，所以那些為桌面瀏覽器設計的網站放到移動設備上顯示時，必然會因為移動設備的viewport太窄，而擠作一團，甚至布局什么的都會亂掉。如果把移動設備上瀏覽器的可視區域設為viewport的話，某些網站就會因為viewport太窄而顯示錯亂，所以這些瀏覽器就決定默認情況下把viewport設為一個較寬的值，比如980px，這樣的話即使是那些為桌面設計的網站也能在移動瀏覽器上正常顯示了。ppk把這個瀏覽器默認的viewport叫做 layout viewport（布局視口）這個layout viewport的寬度可以通過document.documentElement.clientWidth 來獲取。

然而，layout viewport 的寬度是大于瀏覽器可視區域的寬度的，所以我們還需要一個viewport來代表瀏覽器可視區域的大小，ppk把這個viewport叫做 visual viewport （視覺視口）。visual viewport的寬度可以通過window.innerWidth 來獲取

現在我們已經有兩個viewport了：layout viewport 和 visual viewport。但瀏覽器覺得還不夠，因為現在越來越多的網站都會為移動設備進行單獨的設計，所以必須還要有一個能完美適配移動設備的viewport。所謂的完美適配指的是，首先不需要用戶縮放和橫向滾動條就能正常的查看網站的所有內容；第二，顯示的文字的大小是合適，比如一段14px大小的文字，不會因為在一個高密度像素的屏幕里顯示得太小而無法看清，理想的情況是這段14px的文字無論是在何種密度屏幕，何種分辨率下，顯示出來的大小都是差不多的。當然，不只是文字，其他元素像圖片什么的也是這個道理。ppk把這個viewport叫做 ideal viewport（理想視口），也就是第三個viewport——移動設備的理想viewport。

理想視口并沒有一個固定的尺寸，不同的設備擁有有不同的理想視口。所有的iphone的理想視口寬度都是320px，無論它的屏幕寬度是320還是640，也就是說，在iphone中，css中的320px就代表iphone屏幕的寬度。但是安卓設備就比較復雜了，有320px的，有360px的，有384px的等等，關于不同的設備ideal viewport的寬度都為多少，可以到http://viewportsizes.com去查看一下，里面收集了眾多設備的理想寬度。

視口總結：ppk把移動設備上的viewport分為布局視口、視覺視口和理想視口三類，其中的理想視口是最適合移動設備的viewport，理想視口的寬度等于移動設備的屏幕寬度，只要在css中把某一元素的寬度設為理想視口的寬度(單位用px)，那么這個元素的寬度就是設備屏幕的寬度了，也就是寬度為100%的效果。理想視口的意義在于，無論在何種分辨率的屏幕下，那些針對理想視口而設計的網站，不需要用戶手動縮放，也不需要出現橫向滾動條，都可以完美的呈現給用戶。

獲取三個視口：

???????var layout=document.documentElement.clientwidth; //獲取布局視口 var visual = window。innerwidth; //獲取視覺視口幾乎全部支持 var ideal = screen.width; //有的代表理想視口的寬度，有的代表設備的分辨率

利用meta標簽對viewport進行控制

移動設備默認的viewport是layout viewport，也就是那個比屏幕要寬的viewport，但在進行移動設備網站的開發時，我們需要的是ideal viewport。那么怎么才能得到ideal viewport呢？這就該輪到meta標簽出場了。

我們在開發移動設備的網站時，最常見的的一個動作就是把下面這個東西復制到我們的head標簽中：

該meta標簽的作用是讓當前viewport的寬度等于設備的寬度，同時不允許用戶手動縮放。也許允不允許用戶縮放不同的網站有不同的要求，但讓viewport的寬度等于設備的寬度，這個應該是大家都想要的效果，如果你不這樣的設定的話，那就會使用那個比屏幕寬的默認viewport，也就是說會出現橫向滾動條。

這個name為viewport的meta標簽到底有哪些東西呢，又都有什么作用呢？

meta viewport 標簽首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動設備的viewport問題。后來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支持，事實也證明這個東西還是非常有用的。

設置理想視口:

要得到理想視口就必須把默認的布局視口的寬度設為移動設備的屏幕寬度。因為meta viewport中的width能控制layout viewport的寬度，所以我們只需要把width設為width-device這個特殊的值就行了。

可以看到通過width=device-width，所有瀏覽器都能把當前的viewport寬度變成理想視口的寬度，但要注意的是，在iphone和ipad上，無論是豎屏還是橫屏，寬度都是豎屏時理想視口的寬度。

這句代碼也能達到和前一句代碼一樣的效果，也可以把當前的的viewport變為理想視口。

因為從理論上來講，這句代碼的作用只是不對當前的頁面進行縮放，也就是頁面本該是多大就是多大。那為什么會有 width=device-width 的效果呢？

要想清楚這件事情，首先你得弄明白這個縮放是相對于什么來縮放的，因為這里的縮放值是1，也就是沒縮放，但卻達到了 ideal viewport 的效果，所以，那答案就只有一個了，縮放是相對于 ideal viewport來進行縮放的，當對ideal viewport進行100%的縮放，也就是縮放值為1的時候，不就得到了 ideal viewport 嗎？事實證明，的確是這樣的

但如果 width 和 initial-scale=1 同時出現，并且還出現了沖突呢？比如：

width=400 表示把當前 viewport 的寬度設為400px，initial-scale=1 則表示把當前 viewport 的寬度設為ideal viewport的寬度，那么瀏覽器到底該服從哪個命令呢？是書寫順序在后面的那個嗎？不是。當遇到這種情況時，瀏覽器會取它們兩個中較大的那個值。例如，當width=400，ideal viewport 的寬度為320時，取的是400；當width=400， ideal viewport的寬度為480時，取的是ideal viewport的寬度

要把當前的viewport寬度設為ideal viewport的寬度，既可以設置 width=device-width，也可以設置 initial-scale=1，但這兩者各有一個小缺陷，就是iphone、ipad以及IE 會橫豎屏不分，通通以豎屏的ideal viewport寬度為準。所以，最完美的寫法應該是，兩者都寫上去，：

12、適配

等比問題：

沒有加name 為viewport的meta標簽：

一個相同css像素大小的區域在不同的設備上是等比的；在不同的設備上占據的實際物理像素大小（英寸）是不一樣的。

加name為viewport的meta標簽：

一個相同css像素大小的區域在不同的設備上是不等比的;在不同的設備上占據的實際物理像素大小（英寸）是一樣的。

那么等比是不是一個必須需要的呢？肯定是的。百分之百還原設計稿是在不同的設備上要等比。

通過上面的結論，有的人認為要想實現等比不加meta標簽不就可以了嗎？但是如果不加meta標簽，字體什么的就會不清晰。文字要完美清晰的展示需要加上meta標簽。但是問題是：加上meta標簽就不等比了，所以這就是我們要做的適配，加上meta標簽后也要等比。百分之百還原設計圖，讓你的網頁在不同的設備上等比這就是適配。我們常見的適配方案有：百分比適配，rem適配和viewport適配。

（1）rem適配

rem：是一個單位，相對于根元素HTML中font-size的大小

? ? html{font-size: 40px;}#box{width: 10rem; //box的寬為 40*10=400height:300px;background: pink;/* font-size: 20px; */}

rem適配代碼：

//獲取布局視口的大小 //var html=document.querySelector("html");//html.style.fontSize = document.documentElement.clientWidth/10+"px";(function(){var styleNode=document.createElement("style");var w=document.documentElement.clientWidth/10;styleNode.innerHTML="html{font-size:"+w+"px!important;}";document.head.appendChild(styleNode); })()

rem適配原理：改變了一個元素在不同設備上占據的css像素個數

優點：沒有破壞完美視口

缺點：px值到rem轉化太復雜

（2）視口適配

//將所有設備布局視口的寬度調整為設計圖的寬度/*var targetW = 640;var scale = screen.width/targetW;var meta = document.createElement("meta");meta.name = "viewport";meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";document.head.appendChild(meta);*///viewport/*viewport適配的原理：viewport適配方案中，每一個元素在不同設備上占據的css像素的個數是一樣的。但是css像素和物理像素的比例是不一樣的，等比的*//*viewport適配的優缺點：優點:所量即所得缺點:沒有使用完美視口*/(function(){var targetW = 640;var scale = document.documentElement.clientWidth/targetW;var meta = document.querySelector("meta[name='viewport']");meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";})()

（3）百分比適配

百分比適配相對比較簡單。

高度設置百分比的條件：

所有父級元素必須有高度；必須是塊級元素，行內元素不起作用； ie9 以下使用 position:ralative 的塊級元素使用高度百分比是無效的。響應式布局：簡而言之，就是頁面元素的位置隨著屏幕尺寸的變化而變化，通常會用百分比來定位，而在設計上需要預留一些可被“壓縮”的空間（如果高度不能設置百分比的時候可以把已經設置的margin，padding 設置成百分比的形式，預留出唄被壓縮的空間） —— 相對比較適用于內容需要一屏展示。

總結

以上是生活随笔為你收集整理的移动端像素概念，viewport，适配的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。