移動端開發基礎知識掃盲

以iphone6為例，可知道：

解析度 ：1334pt x 750pt

指的是螢幕上垂直有1334個物理畫素，水平有750個物理畫素。

1、物理畫素又叫“裝置畫素”，他是顯示裝置中最微小的物理部件，每個畫素可以根據作業系統設定
自己的顏色和亮度，正是這些微小距離欺騙我們的眼睛從而看到影象效果。
2、物理畫素也是廠商在出廠時就設定好了的————即一個裝置的解析度是固定不變的。複製程式碼

其換算公式如下：

PPI最直觀的的效果可以參考下圖：

帶著這個定義我們來看頁面在瀏覽器中的縮放情況：

首先我們假如有一個2px * 2px 寬高的盒子。根據定義在100%縮放情況下 2px * 2px 是完全等同於 2px * 2px的物理畫素。

如果現在去縮放瀏覽器，我們會發現2px*2px的尺寸會隨著縮放而發生變化。實際上現代瀏覽器的縮放功能就是通過拉伸畫素的方式實現的。而這種拉伸畫素的方式也更能夠讓我們清晰瞭解獨立畫素與物理畫素之間的差異。

首先，我們可以很明確的知道，瀏覽器不管怎麼拉伸畫素它也不可能改變物理層面上的畫素(物理畫素)，所以它能也只能夠改變自己的邏輯畫素 - CSS畫素，在放大的情況下 1css畫素 會佔據多個物理畫素，從而在應用層面上使顯示區域寬度變小，瀏覽器為了能夠顯示完整的內容從而出現滾動條，而縮小的情況下，多個css畫素會被合併在一個1個物理畫素中去顯示。但是這種方式實際上是一種有損的過程，因為用1個物理畫素去表示多個CSS畫素，會導致內容丟失更多的細節。正是因為css畫素的丟失，才導致內容變的更小。

更直觀的瞭解可以看下圖：

100%模式下 1css畫素就等於 1物理畫素

在放大的情況下，1css畫素會佔據多個物理畫素

在縮小的情況下，多個css畫素會被合併在物理畫素中

視口 viewport

1.1 viewport 基礎

viewport 解釋為中文就是‘視口’的意思，也就是瀏覽器中用於顯示網頁的區域。在 PC 端，其大小也就是瀏覽器可視區域的大小，所以我們也不會太關注此概念；而在移動端，絕大多數情況下 viewport 都大於瀏覽器可視區，保證 PC 頁面在移動瀏覽器上面的可視性。為提升可視性體驗，針對移動端有了對 viewport 的深入研究。

1.2 viewport 詳解

在移動端有三種類型的 viewport: layoutviewport、visualviewport、idealviewport。具體解釋如下：

• layoutviewport: 大於實際螢幕， 元素的寬度繼承於 layoutviewport，用於保證網站的外觀特性與桌面瀏覽器一樣。layoutviewport 到底多寬，每個瀏覽器不同。iPhone 的 safari 為 980px，通過 document.documentElement.clientWidth 獲取。
• visualviewport: 當前顯示在螢幕上的頁面，即瀏覽器可視區域的寬度。
• idealviewport: 為瀏覽器定義的可完美適配移動端的理想 viewport，固定不變，可以認為是裝置視口寬度。比如 iphone 7 為 375px, iphone 7p 為 414px。

1.3 viewport 設定

我們通過對幾種 viewport 設定可以對網頁的展示進行有效的控制，在移動端我們經常會在 head 標籤中看到這段程式碼：

<meta name='viewport' content='width=device-width,initial-scale=1,user-scale=no' />
複製程式碼複製程式碼

通過對 meta 標籤三個 viewport 的設定，最終使頁面完美展示。下面詳細的闡釋其具體含義:

• width 設定的是 layoutviewport 的寬度
• initial-scale 設定頁面的初始縮放值，並且這個初始縮放值是相對於 idealviewport 縮放的，最終得到的結果不僅會決定 visualviewport，還會影響到 layoutviewport
• user-scalable 是否允許使用者進行縮放的設定

對上面的說明通過公式推導進行進一步的解釋：

// 設定兩個變數：
viewport_1 = width;
viewport_2 = idealviewport / initial-scale;

// 則：
layoutviewport = max{viewport_1, viewport_2};
visualviewport = viewport_2;
複製程式碼複製程式碼

只要 layoutviewport === visualviewport，頁面下面不會出現滾動條，預設只是把頁面放大或縮小。