這篇文章給大家分享的是有關(guān)移動端開發(fā)教程之像素的顯示問題有哪些的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、賽罕網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為賽罕等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

前言

相信在移動端開發(fā)的過程中大家都會發(fā)現(xiàn)，移動端的顯示一般與桌面端的不一樣。比如在iphone6上顯示一個(gè)1334x750像素大小塊狀元素，雖然在蘋果官網(wǎng)上iphone6標(biāo)稱的屏幕像素密度是1334x750規(guī)格，但是我們卻發(fā)現(xiàn)這個(gè)1334x750像素大小的塊狀元素卻不能鋪滿整個(gè)屏幕。

那到底是為什么呢？下面從幾個(gè)方面來作探討。

像素密度（PPI）

PPI(Pixel Per Inch)，即表示每英寸有多少像素，類似于人口密度和建筑密度，如下圖舉例了幾種PPI的表示。

以iphone6為例，一般像素密度的計(jì)算公式為：Math.sqrt(1366*1366 + 640*640)

但是要計(jì)算這個(gè)PPI，那么我們先要知道設(shè)備的屏幕上到底有多少個(gè)像素，也就是Pixel Per Inch 中的第一個(gè)Pixel。

設(shè)備像素（DP）&& 設(shè)備像素比（DPR）

設(shè)備像素（Device pixel），也稱物理像素（Physical pixel），也就是本文一開始提到iphone6的屏幕規(guī)格。像素密度中所指的像素就是設(shè)備像素，對于一般的顯示設(shè)備來說，一個(gè)像素對應(yīng)著屏幕上的一個(gè)發(fā)光點(diǎn)，因此PPI也稱為DPI（dots per inch），但是這僅在顯示設(shè)備上才等價(jià)，比如在打印機(jī)上就不一樣了。

由于市面上每一臺手機(jī)的屏幕規(guī)格不一樣，有的是720P，有的是1080P，甚者是2K等等，這些設(shè)備的屏幕有些像素多，有些像素少，如果同樣顯示一個(gè)像素的話，則會出現(xiàn)像以下的情況：

越高PPI的屏幕，顯示一個(gè)像素點(diǎn)的面積就越小，一張由4x4個(gè)像素點(diǎn)組成的圖顯示在PPI為64的屏幕上，那么換到256PPI的屏幕上顯示則會縮小為原來大小的一半。

反過來，如果要在PPI為256的屏幕上顯示效果與PPI為64的屏幕一樣，那么得要把圖片放大2倍。

因此配有高清屏幕的手機(jī)，廠商為了其設(shè)備的可用性，即圖標(biāo)和文字可以被正確識別和準(zhǔn)確點(diǎn)擊，就必須保證各類素材在其設(shè)備上的顯示與標(biāo)清設(shè)備一樣，而這個(gè)解決方法就是把所有尺寸都放大若干倍。這個(gè)放大比例就叫作設(shè)備像素比(Device Pixel Ratio, DPR)，一般DPR對應(yīng)著下面這個(gè)表：

 	ldpi	mdpi	hdpi	xhdpi
ppi	120	160	240	320
dpr	0.75	1.0	1.5	2.0

因此高清設(shè)備上應(yīng)該配有高清圖片顯示，不然圖片在高清設(shè)備上放大后沒有足夠的像素顯示其細(xì)節(jié)，那么這張圖片就會變得看起來很模糊。

CSS像素

講了這么多概念，仿佛還是沒有很好地解釋文章開頭的問題。下面討論完CSS像素后估計(jì)大家會有一個(gè)比較清晰的概念。

我們通宵在寫CSS的時(shí)候會用到像素單位px，但是這個(gè)像素單位并不一直是與設(shè)備像素一一對應(yīng)，也就是說在CSS中1px（像素）不是對應(yīng)著設(shè)備屏幕中的一個(gè)像素點(diǎn)。為了與設(shè)備像素區(qū)別，CSS中所指的像素px我們一般稱為CSS像素。也就是說CSS像素是一個(gè)虛擬的、相對的單位。

例如在頁面上畫一個(gè)300px寬的塊元素，在一般的顯示器下它只會占屏幕的一部分，但如果我們手動地去放大頁面，很快這個(gè)塊狀元素也會充滿整個(gè)頁面。由此說明，一般情況下CSS像素與系統(tǒng)分辨率下的像素大小相等，即在標(biāo)清設(shè)備中，一個(gè)CSS像素應(yīng)該是與一個(gè)設(shè)備像素大小相等的。但是是高清設(shè)備或者用戶縮放的過程中，一個(gè)CSS像素也有可能等于多個(gè)設(shè)備像素。

舉另外一個(gè)例子，在移動原生應(yīng)用開發(fā)中，如果必須以一個(gè)設(shè)備像素為單位進(jìn)行開發(fā)，那將會是一件非常痛苦的事，因?yàn)椴皇敲恳慌_移動設(shè)備的系統(tǒng)分辨率都是對應(yīng)著一個(gè)設(shè)備像素，有的是1:2，有的是1:2.46，正是因?yàn)橛羞@種差異，在安卓開發(fā)中會有例如dp,dt這種單位（在iOS中會有pt單位），當(dāng)我們給一個(gè)元素定義大小時(shí)，只需要給定一個(gè)dp值，系統(tǒng)將會根據(jù)這個(gè)值再與系統(tǒng)分辨率與設(shè)備像素的比值（即DPR）進(jìn)行換算，最終計(jì)算出顯示在屏幕上的實(shí)際設(shè)備像素。

上面所指出的dp這種抽象單位稱為設(shè)備無關(guān)像素（device independent pixel）。當(dāng)然CSS像素也屬于設(shè)備無關(guān)像素，我們在寫CSS像素的時(shí)候，不用關(guān)心一個(gè)CSS像素對應(yīng)著多少個(gè)設(shè)備像素，系統(tǒng)會自動地根據(jù)DPR來幫我們換算好。我們要關(guān)心的只是如何保證網(wǎng)頁元素因?yàn)橄到y(tǒng)換算而導(dǎo)致被放大的時(shí)候下，還能清晰地展示在設(shè)備上。

視口（Viewport）

正常來說，在移動端打開一個(gè)頁面，如果瀏覽器先會以正常的比例來渲染頁面，然后再自動地設(shè)置一個(gè)比例來縮放頁面，目的是為了讓內(nèi)容更好地展示出來，即頁面內(nèi)容剛好鋪滿整個(gè)手機(jī)屏幕，當(dāng)然如果頁面沒有禁止掉用戶縮放的話，你也可以用兩個(gè)手指把頁面縮放回原始的比例。這整個(gè)過程就是通過視口（viewport）來實(shí)現(xiàn)的，原始頁面渲染好后通過視口縮放使得與系統(tǒng)寬度一樣，從而可以完整地展示頁面。

(圖片來自tgideas團(tuán)隊(duì)博客)

我們可以通過在content中添加inital-scale屬性來控制渲染時(shí)視窗的縮放比例，把它設(shè)置為1則無縮放。

<meta name="viewport" content="initial-scale=1">

我們也可以定義device-width屬性來控制viewport的寬度

<meta name="viewport" content="width=device-width">

一般在移動開發(fā)中我們會設(shè)置不允許用戶縮放，并把較大、最小縮放比設(shè)為1

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

感謝各位的閱讀！關(guān)于“移動端開發(fā)教程之像素的顯示問題有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

本文名稱：移動端開發(fā)教程之像素的顯示問題有哪些-創(chuàng)新互聯(lián)
網(wǎng)頁URL：http://chinadenli.net/article36/dosepg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、做網(wǎng)站、營銷型網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)