資訊專欄INFORMATION COLUMN
摘要：屏幕尺寸指屏幕的對(duì)角線長(zhǎng)度，單位是英寸，英寸厘米。的大小是和設(shè)備相關(guān)的，在移動(dòng)端例如手機(jī)上，的大小是比端要小的，一般無(wú)論手機(jī)還是平板，默認(rèn)的大小都是。總結(jié)在添加之后，移動(dòng)端的寬度會(huì)從默認(rèn)的變成各個(gè)設(shè)備的。
我們?cè)谧鲰憫?yīng)式布局的時(shí)候，肯定要考慮到適配移動(dòng)端的屏幕，大多數(shù)同學(xué)也一定復(fù)制粘貼過(guò)下面這段代碼：
添加了這段代碼以后，我們?cè)谝苿?dòng)端看到的顯示效果就非常好，整個(gè)頁(yè)面不會(huì)縮成一團(tuán)。但是很多時(shí)候我們只是拿來(lái)用了，沒有去理解這段代碼究竟干了什么，為什么會(huì)影響移動(dòng)端頁(yè)面的布局效果，它又是怎么起作用的。今天我們就花點(diǎn)時(shí)間來(lái)徹底搞明白 viewport 到底是什么。
1. 單位在討論 viewport 之前，我們需要理解一些單位的概念：
設(shè)備像素 / 物理像素（physical pixels）
是指屏幕的實(shí)際物理像素點(diǎn)，比如 iPhone6 Plus 是 1920*1080 的像素分辨率，那么代表它縱向有 1920 個(gè)物理像素點(diǎn)，橫向有 1080 個(gè)物理像素點(diǎn)。
CSS 像素（css pixel） / 密度獨(dú)立像素（density independent pixels - dip）
CSS 像素是 web 編程中的概念，是抽象的，不是實(shí)際存在的。它是獨(dú)立于設(shè)備用于邏輯上衡量像素的單位，所以又叫密度獨(dú)立像素。dip 有時(shí)候也縮寫為 dp 。
屏幕尺寸
指屏幕的對(duì)角線長(zhǎng)度，單位是英寸（inch），1 英寸 = 2.54 厘米。常見屏幕尺寸有 5.0、5.5 和 6.0 等。
屏幕像素密度（pixels per inch - ppi）
指屏幕上每英寸可以顯示的物理像素點(diǎn)的數(shù)量。比如 iPhone6 Plus 是 5.5 英寸，分辨率（也就是物理像素）是 1920*1080 像素，那么它的 ppi = √(1920^2+1080^2) / 5.5 ≈ 401ppi 。也就是說(shuō)它每英寸可以顯示 440 個(gè)物理像素點(diǎn)。
設(shè)備像素比
指物理像素和密度獨(dú)立像素的比值。
window.devicePixelRatio = 物理像素 / dip。
可以通過(guò) window.devicePixelRatio 獲得，該屬性被所有WebKit瀏覽器以及Opera所支持。
viewport 是指 web 頁(yè)面上用戶的可見區(qū)域。
viewport 的大小是和設(shè)備相關(guān)的，在移動(dòng)端例如手機(jī)上，viewport 的大小是比 PC 端要小的，一般無(wú)論手機(jī)還是平板，默認(rèn)的 viewport 大小都是 980px 。
剛開始 web 頁(yè)面僅僅是在 PC 端進(jìn)行查看的，但是后來(lái)隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，越來(lái)越多的 web 訪問是通過(guò)移動(dòng)端進(jìn)行的，但是因?yàn)?PC 的 viewport 要比移動(dòng)端大，所以為了快速修復(fù)這個(gè)問題，移動(dòng)端的瀏覽器默認(rèn)只是把整個(gè)頁(yè)面等比例縮小到移動(dòng)端的 viewport 大小。
這樣做的后果就是，用戶看到的是一個(gè)縮小版的整個(gè)頁(yè)面，字體、圖標(biāo)和內(nèi)容等等都非常小，想要點(diǎn)擊或者查看都需要去放大頁(yè)面進(jìn)行操作，放大頁(yè)面之后就會(huì)出現(xiàn)橫向滾動(dòng)條，這對(duì)用戶體驗(yàn)來(lái)說(shuō)是非常不好的。
那么回到我們最開始寫的 meta 標(biāo)簽：
device-width 是指這個(gè)設(shè)備最理想的 viewport 寬度。iPhone6 之前的 device-width 都是 320px ，iPhone6 是 375px ，iPhone6 Plus 是 414px ，而這個(gè) device-width 是和 CSS像素（也叫密度獨(dú)立像素 dip）是相同的。也就是說(shuō)，web 頁(yè)面中的 CSS像素的值等于 device-width 時(shí)，對(duì)應(yīng)到手機(jī)上就是占滿全屏的寬度。
安卓手機(jī)的 device-width 有320px、360px 和 384px 等等，不同的設(shè)備 device-width 是不一樣的。
initial-scale=1.0 是指初始化的時(shí)候縮放大小是1，也就是不縮放。
user-scalable=0 是指禁止用戶進(jìn)行縮放。
maximum-scale=1.0 是指用戶最大縮放大小是1，其實(shí)在禁止用戶縮放以后，這一句可以省略。
在設(shè)計(jì)人員為移動(dòng)端設(shè)計(jì)頁(yè)面的時(shí)候經(jīng)?？梢月牭?倍圖和3倍圖這些詞語(yǔ)，這又是什么意思呢，我們以 iPhone6 舉例：
iPhone6 的分辨率（也就是物理像素）是 1334*750 像素，它的 device-width 是 375px 。
如果我們將屏幕橫向分成 375 份，CSS 中 1px 占用的1份，因?yàn)槠聊痪湍敲创?，CSS中 width 等于 375px 時(shí)橫向就會(huì)占滿全屏，但是實(shí)際上存在的物理像素點(diǎn)橫向是750個(gè) ，所以在我們寫 CSS 時(shí) 1px 對(duì)應(yīng)到屏幕上是占用了2個(gè)物理像素點(diǎn)。
如果我們不寫 width=device-width 這一句的話，默認(rèn) viewport 寬是 980px 。那么把 iPhone6 的屏幕橫向分成980份，CSS 中 1px 占用1份，但是真正的像素點(diǎn)橫向只有750個(gè)，這就意味著，實(shí)際上渲染出來(lái)的寬度是 75/98 個(gè)像素大?。ㄖ皇抢碚撋希?/p>
設(shè)計(jì)人員在設(shè)計(jì)原型圖的時(shí)候以 750px 的寬度為基準(zhǔn)，我們?cè)趯?CSS的時(shí)候縮寫一半來(lái)使用，但是在渲染的時(shí)候 1px 等于 2px 的物理像素，所以整個(gè)圖片還是按 750px 的寬度來(lái)顯示的，不會(huì)失真。
如果設(shè)計(jì)人員以 375px 的寬度為基準(zhǔn)，那么我們?cè)谑褂玫臅r(shí)候直接把設(shè)計(jì)圖中的像素寬度用在 CSS 中，那么在渲染的時(shí)候，1px 等于 2px 的物理像素，相當(dāng)于圖片會(huì)放大2倍，就會(huì)產(chǎn)生失真。
3. 總結(jié)在添加 之后，移動(dòng)端的 viewport 寬度會(huì)從默認(rèn)的 980px 變成各個(gè)設(shè)備的 device-width 。
CSS 中的 100% 就等于 device-width 。
知道了這些，我們就可以結(jié)合別的知識(shí)，為頁(yè)面進(jìn)行響應(yīng)式布局了。
歡迎關(guān)注我的公眾號(hào)文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50478.html
摘要：現(xiàn)在開始，用標(biāo)簽來(lái)設(shè)置?；氐綉?yīng)用場(chǎng)景，我們用這個(gè)標(biāo)簽的主要目的是做移動(dòng)端的適配，一般都是做一個(gè)專門為移動(dòng)端設(shè)計(jì)的頁(yè)面。利用這個(gè)，就是用來(lái)設(shè)置的寬度。小結(jié)用的目的，是為了設(shè)置的大小，從而保證能在移動(dòng)端設(shè)備上合適的顯示出來(lái)。 前兩篇博客，把像素和viewport的概念講清楚了?，F(xiàn)在開始，用meta標(biāo)簽來(lái)設(shè)置viewport。 meta標(biāo)簽 meta標(biāo)簽里面的內(nèi)容，主要是提供關(guān)于這個(gè)HTML...
摘要：影響著其中元素的尺寸和定位。在標(biāo)準(zhǔn)中，元素的稱為。當(dāng)?shù)膶挾雀叨仁褂冒俜謹(jǐn)?shù)的值時(shí)，這個(gè)百分?jǐn)?shù)的基準(zhǔn)就是的尺寸。例子其中就溢出了的區(qū)域。造成以上不同的原因是，在桌面端的縮放和在移動(dòng)端的縮放有不同的性質(zhì)。這兩個(gè)數(shù)值的單位是設(shè)備獨(dú)立像素。 前言 本篇文章修改、整理自我以前寫的一篇文章。 在閱讀這篇文章之前，你需要了解設(shè)備像素、邏輯像素（設(shè)備獨(dú)立像素）和CSS像素的區(qū)別，見我的前一篇文章理解設(shè)備...
摘要：背景現(xiàn)在工作中有超過(guò)一半的時(shí)間用于移動(dòng)端項(xiàng)目的開發(fā)，包括嵌入頁(yè)，微信頁(yè)面和移動(dòng)頁(yè)。經(jīng)過(guò)研究，我在公司的多個(gè)移動(dòng)端項(xiàng)目使用了布局來(lái)解決移動(dòng)端自適應(yīng)布局的問題。簡(jiǎn)單的說(shuō)它就是一個(gè)相對(duì)單位，布局是一個(gè)流行的解決移動(dòng)端響應(yīng)式布局的方案。 背景 現(xiàn)在工作中有超過(guò)一半的時(shí)間用于移動(dòng)端項(xiàng)目的開發(fā)，包括app嵌入頁(yè)，微信頁(yè)面和移動(dòng)wap頁(yè)。 開發(fā)移動(dòng)端頁(yè)面跟開發(fā)PC頁(yè)面的一個(gè)大區(qū)別就是移動(dòng)端對(duì)響應(yīng)式布...
摘要：移動(dòng)客戶端的開發(fā)類型原生，也就是完全使用移動(dòng)設(shè)備系統(tǒng)語(yǔ)言寫的客戶端，就是純，安卓就是純就是用戶看到的界面體驗(yàn)到的交互都是原生的。 前端是個(gè)很大的概念，我的理解是用戶能夠看到，直接接觸到的層面都算是前端，比如IOS客戶端界面，安卓客戶端界面，網(wǎng)頁(yè)界面，甚至PC/MAC 桌面端軟件界面；現(xiàn)在最常見的說(shuō)法一般是指Web前端，也就是針對(duì)于網(wǎng)頁(yè)端開發(fā)的工作。 Web App就是以瀏覽器作為客戶端...
摘要：移動(dòng)客戶端的開發(fā)類型原生，也就是完全使用移動(dòng)設(shè)備系統(tǒng)語(yǔ)言寫的客戶端，就是純，安卓就是純就是用戶看到的界面體驗(yàn)到的交互都是原生的。 前端是個(gè)很大的概念，我的理解是用戶能夠看到，直接接觸到的層面都算是前端，比如IOS客戶端界面，安卓客戶端界面，網(wǎng)頁(yè)界面，甚至PC/MAC 桌面端軟件界面；現(xiàn)在最常見的說(shuō)法一般是指Web前端，也就是針對(duì)于網(wǎng)頁(yè)端開發(fā)的工作。 Web App就是以瀏覽器作為客戶端...
閱讀 3958·2021-10-19 13:23
閱讀 2337·2021-09-09 11:37
閱讀 2520·2019-08-29 15:20
閱讀 3414·2019-08-29 11:08
閱讀 1676·2019-08-26 18:27
閱讀 1774·2019-08-23 12:20
閱讀 3040·2019-08-23 11:54
閱讀 2558·2019-08-22 15:19
