前言

承接 移動端適配（上），這次主要寫「viewport」縮放適配方式。這是淘寶使用的方法，實現原理是將頁面放大 dpr（devicePixelRatio）倍，然後 viewport 設置為 1/dpr。例如 iphone6/7/8 的 dpr 為 2，則頁面整體放大 2 倍，1px(css 單位)在 iphone6/7/8 下默認顯示為 2px(物理像素)。將 viewport 設置為 1/2，這樣頁面整體縮回原始大小。這樣頁面顯示時的寬度就會等於設備邏輯像素大小（device-width）。

基本概念

物理像素

物理像素（physical pixel）既設備像素，用於表示顯示屏中一個最微小的方格。每個方格由操作系統控製顏色和亮度。方格越微小，畫面越細膩。

邏輯像素

邏輯像素也稱為設備獨立像素（density-independent pixel）或者虛擬像素，獨立於設備用於邏輯上衡量像素的單位。

設備像素比

設備像素比（device pixel ratio）簡稱為 dpr，其大小是物理像素與邏輯像素的比值。執行代碼 window.devicePixelRatio 可獲取到當前設備的 dpr。

（以蘋果設備為例，綠、紅、黃各部分分別表示各設備的物理像素、邏輯像素、設備像素比。圖片來自 PaintCode。）

解決方法

以 iPhone6 為例，其物理像素、邏輯像素、設備像素比分別為 750×1334、375×667、2。這也造成了 1px 的邊框在 iPhone6 上顯示為 2px 的寬度。以下為解決方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<meta
  name="viewport"
  content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<!-- dpr等於1時使用 -->

<meta
  name="viewport"
  content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"
/>
<!-- dpr等於2時使用 -->

<meta
  name="viewport"
  content="initial-scale=0.333333, maximum-scale=0.333333, minimum-scale=0.333333, user-scalable=no"
/>
<!-- dpr等於3時使用 -->

<meta
  name="viewport"
  content="initial-scale=0.25, maximum-scale=0.25, minimum-scale=0.25, user-scalable=no"
/>
<!-- dpr等於4時使用 -->

其思想是根據設備的 dpr 值相應改變 meta 標簽中 viewport 的值（當然你也可以通過腳本動態生成該標簽）。