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