資訊專欄INFORMATION COLUMN
摘要：獨(dú)立像素像素像素是一個(gè)抽象的單位，主要使用在瀏覽器上，用來(lái)精確的度量確定頁(yè)面上的內(nèi)容。一般情況下，像素被稱為與設(shè)備無(wú)關(guān)的像素像素，簡(jiǎn)稱為。在一個(gè)標(biāo)準(zhǔn)的顯示密度下，一個(gè)像素對(duì)應(yīng)著一個(gè)設(shè)備像素。獨(dú)立像素比物理像素獨(dú)立像素。
設(shè)備像素/物理像素
設(shè)備像素也被稱為物理像素,他是顯示設(shè)備中一個(gè)最微小的物理部件。
屏幕密度
通常以每英寸有多少物理像素來(lái)計(jì)算（PPI）。
獨(dú)立像素/CSS像素
CSS像素是一個(gè)抽象的單位，主要使用在瀏覽器上，用來(lái)精確的度量（確定）Web頁(yè)面上的內(nèi)容。
一般情況下，CSS像素被稱為與設(shè)備無(wú)關(guān)的像素（device-independent像素），簡(jiǎn)稱為“DIPs”。在一個(gè)標(biāo)準(zhǔn)的顯示密度下，一個(gè)CSS像素對(duì)應(yīng)著一個(gè)設(shè)備像素。
就拿上面的代碼來(lái)說(shuō)（在頭部沒(méi)有加入），在電腦端和手機(jī)端顯示，結(jié)果是
出現(xiàn)這樣的原因是因?yàn)殡娔X端顯示設(shè)備的物理像素（液晶顯示管）比較大，而手機(jī)的比較小，（生活中你可以發(fā)現(xiàn)電腦和手機(jī)都要存放很多液晶顯示管，區(qū)別就是電腦的屏幕大，手機(jī)屏幕?。┧越Y(jié)果是同樣要用200個(gè)物理像素結(jié)果就不一樣了。
以上兩張圖片顯示的結(jié)果是css樣式的結(jié)果。
獨(dú)立像素比/window.devicePixelRatio
window.devicePixelRatio=物理像素/獨(dú)立像素。
通過(guò)計(jì)算你會(huì)發(fā)現(xiàn)剛才的兩種手機(jī)的結(jié)果分別是1或者2（當(dāng)然還有其它手機(jī)屏幕結(jié)果有些差別）
呵呵........
接下討論一下，要想讓手機(jī)顯示上顯示的結(jié)果和電腦一樣大怎么辦，所謂的一樣大是，就是你用一把尺子量一下，電腦上長(zhǎng)度和寬度各是200，手機(jī)上長(zhǎng)度和寬度也各是200，也就是給人的視覺(jué)效果是一樣大。
手機(jī)屏幕分為：
一：非視網(wǎng)膜屏幕（物理像素320，該設(shè)備的獨(dú)立像素（視區(qū)寬度）也是320）
二：視網(wǎng)膜屏幕（物理像素640，該設(shè)備的獨(dú)立像素（視區(qū)寬度）還是320，剛才手機(jī)顯示的結(jié)果用的就是用的這個(gè)手機(jī)）
這個(gè)代碼的作用就是讓視圖區(qū)域撐滿手機(jī)物理屏幕。
html文件頭部加上這個(gè)代碼后，手機(jī)顯示的大小和電腦顯示的大小尺寸大小就一樣了。
但是手機(jī)上顯示的圖片就模糊了，這是因?yàn)槟阋@示同樣的物理大小，視網(wǎng)膜屏幕就要用雙倍的物理像素來(lái)顯示（一個(gè)一像素的圖片，如果用瀏覽器4個(gè)像素（即放大了一倍）來(lái)看會(huì)變模糊和失真，所以在給手機(jī)做圖片的時(shí)候，要放大一倍，就是在手機(jī)上顯示的圖片是100乘以100，那ps做圖片要做成200乘以200這樣才會(huì)清晰）。
哈哈.....
歡迎指正。
看到網(wǎng)上很多的文章看的我好暈，還說(shuō)如果覺(jué)得文章就給他打賞，我他媽的看的頭昏眼花還沒(méi)有叫他賠錢呢。
大家如果覺(jué)得我的文章寫到你的痛點(diǎn)了，或者有用請(qǐng)打賞。微信:youronglang 或者買點(diǎn)我自家代理的酒 關(guān)注微博：匠心酒
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115316.html
摘要：高清屏概念解析和前端開發(fā)的關(guān)系高清屏概念解析高清屏概念的興起主要是從喬幫主發(fā)布設(shè)備開始興起。還好我們有一個(gè)叫設(shè)備像素比的東西來(lái)檢測(cè)當(dāng)前屏幕是不是屬于高清屏幕。 前言 做移動(dòng)端h5開發(fā)很久了，從開始入行到現(xiàn)在。很多知識(shí)和工具都是在用前輩留下的遺產(chǎn)，都沒(méi)有深入的研究過(guò)原因，了解為什么要這么去做。 也許自己也是過(guò)了交給自己做什么就做什么的階段了。在國(guó)慶節(jié)有一個(gè)大塊的時(shí)間，把最近看到的知識(shí)總結(jié)...
摘要：設(shè)備像素設(shè)備分辨率設(shè)備像素也叫物理像素。從圖中可以驗(yàn)證，橫縱方向的設(shè)備像素?cái)?shù)量恰好是設(shè)備獨(dú)立像素的倍。像素與設(shè)備獨(dú)立像素的關(guān)系縮放比例就是像素邊長(zhǎng)設(shè)備獨(dú)立像素邊長(zhǎng)。因?yàn)榈膶挾葲](méi)有改變，無(wú)論以什么單位衡量設(shè)備像素設(shè)備獨(dú)立像素還是像素。 這篇文章是我在我的舊博客上發(fā)過(guò)的文章，最近又碰到這個(gè)問(wèn)題，整理修改了一下發(fā)到這里。 像素單位 像素單位有設(shè)備像素、邏輯像素和CSS像素3種。 設(shè)備像素（d...
摘要：布局，縮放這也是淘寶使用的方案，根據(jù)屏幕寬度設(shè)定值，需要適配的元素都使用為單位，不需要適配的元素還是使用為單位。 討論適配方案之前，先了解幾個(gè)移動(dòng)端的概念。 基礎(chǔ)概念 設(shè)備像素(device pixels)：又稱為物理像素，是顯示屏的最小物理單位。在操作系統(tǒng)的調(diào)度下，每一個(gè)設(shè)備像素都有自己的顏色值和亮度值。 設(shè)備獨(dú)立像素(device independent pixels):基于計(jì)算機(jī)...
閱讀 1609·2021-11-04 16:11
閱讀 3328·2021-09-09 11:33
閱讀 1571·2019-08-30 15:54
閱讀 626·2019-08-30 15:44
閱讀 3185·2019-08-30 15:43
閱讀 2567·2019-08-30 13:06
閱讀 1707·2019-08-29 17:00
閱讀 908·2019-08-29 15:33
