window.devicePixelRatio 獨立像素比（經典文章+原創(chuàng)）

_ang 發(fā)布于2019-08-30 13:06 / 2553人閱讀

摘要：獨立像素像素像素是一個抽象的單位，主要使用在瀏覽器上，用來精確的度量確定頁面上的內容。一般情況下，像素被稱為與設備無關的像素像素，簡稱為。在一個標準的顯示密度下，一個像素對應著一個設備像素。獨立像素比物理像素獨立像素。

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

就拿上面的代碼來說（在頭部沒有加入），在電腦端和手機端顯示，結果是

出現這樣的原因是因為電腦端顯示設備的物理像素（液晶顯示管）比較大，而手機的比較小，（生活中你可以發(fā)現電腦和手機都要存放很多液晶顯示管，區(qū)別就是電腦的屏幕大，手機屏幕小）所以結果是同樣要用200個物理像素結果就不一樣了。
以上兩張圖片顯示的結果是css樣式的結果。

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

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

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

這個代碼的作用就是讓視圖區(qū)域撐滿手機物理屏幕。

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

哈哈.....
歡迎指正。
看到網上很多的文章看的我好暈，還說如果覺得文章就給他打賞，我他媽的看的頭昏眼花還沒有叫他賠錢呢。
大家如果覺得我的文章寫到你的痛點了，或者有用請打賞。微信:youronglang 或者買點我自家代理的酒關注微博：匠心酒

GPU云服務器云服務器原創(chuàng)文章原創(chuàng)文章圖片云主機比獨立主機貴云vps 比獨立vps貴

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115316.html

高清屏概念解析與檢測設備像素比的方法

摘要：高清屏概念解析和前端開發(fā)的關系高清屏概念解析高清屏概念的興起主要是從喬幫主發(fā)布設備開始興起。還好我們有一個叫設備像素比的東西來檢測當前屏幕是不是屬于高清屏幕。前言做移動端h5開發(fā)很久了，從開始入行到現在。很多知識和工具都是在用前輩留下的遺產，都沒有深入的研究過原因，了解為什么要這么去做。也許自己也是過了交給自己做什么就做什么的階段了。在國慶節(jié)有一個大塊的時間，把最近看到的知識總結...

王偉廷 2019-08-29 11:22 評論0 收藏0
【響應式布局】理解設備像素、設備獨立像素和css像素

摘要：設備像素設備分辨率設備像素也叫物理像素。從圖中可以驗證，橫縱方向的設備像素數量恰好是設備獨立像素的倍。像素與設備獨立像素的關系縮放比例就是像素邊長設備獨立像素邊長。因為的寬度沒有改變，無論以什么單位衡量設備像素設備獨立像素還是像素。這篇文章是我在我的舊博客上發(fā)過的文章，最近又碰到這個問題，整理修改了一下發(fā)到這里。像素單位像素單位有設備像素、邏輯像素和CSS像素3種。設備像素（d...

sunny5541 2019-08-30 13:51 評論0 收藏0
移動端適配方案

摘要：布局，縮放這也是淘寶使用的方案，根據屏幕寬度設定值，需要適配的元素都使用為單位，不需要適配的元素還是使用為單位。討論適配方案之前，先了解幾個移動端的概念。基礎概念設備像素(device pixels)：又稱為物理像素，是顯示屏的最小物理單位。在操作系統(tǒng)的調度下，每一個設備像素都有自己的顏色值和亮度值。設備獨立像素(device independent pixels):基于計算機...

Kylin_Mountain 2019-08-02 16:04 評論0 收藏0