著攜帶設備的越來越普及，移動端項目會越來越多的接觸。所以想給大家介紹一下移動端適配那點事。#前端#

像素（Pel, pixel, pictureelement）

每個像素都是由三原色組成的單元。

1080*1920就是橫向1080 縱向1920個物理像素點。

隨著手機發展 從 720p 1080p 到現在的 2k 4k，邏輯上如果手機分辨率翻倍，豈不是之前的網頁都縮小成一半了，不能迭代一次開發一次吧。 為了解決這個問題，就引申出 邏輯分辨率 的概念了

邏輯分辨率（設備獨立像素）

設備獨立像素(Density-independent Pixel, DIP) 又稱密度無關像素。這個點代表一個可以由程序使用的虛擬像素。就比如 以前 360p 屏幕（寬360個物理像素 高640個物理像素） 的時候，你的 1px（一個邏輯分辨率） 定位一個 物理像素點。等到了 720p（寬720個物理像素 高1280個物理像素） 的時候 1px 定位 2*2個物理像素點

PPI超過326的屏幕就是 視網膜屏幕（Retina）#iPhone#

設備像素比(Device Pixel Ratio, DPR)

上面設備列表圖中的 Dpr算法：

設備像素比(DPR) ＝ 物理像素(DP) / 設備獨立像素(DIP)

這樣關系就清楚了很多，通俗的說 1個css程序像素占用多少設備像素

這個數值一般都用在多倍圖中，就是UI切圖，經常會有一倍圖，二倍圖（@2x），三倍圖(@3x)。

因為圖片也是由像素點組成的，如果Dpr為3 ，100*100px 的img 元素，就應該放入一張實際寬高 300*300 的圖片，這樣才能清楚的展示。如果放入100*100 的圖片，沒有占滿的像素點，會通過算法去取附近點的顏色，圖就會模糊。放600*600 的圖，多出的像素點會通過算法取平均色，圖就會鈍化。

Viewport（視口）

一般認為 移動設備上有 三個 viewport

1. layout viewport

移動端瀏覽器的默認布局視口， 可以通過 document.documentElement.clientWidth 來獲取。

移動設備流行之前，pc網頁大行其道，一開始為了讓所有網站正常顯示，移動端瀏覽器就決定默認情況下把viewport 設為一個較寬的值（980px）。這樣pc端的網站也可以在手機上正常顯示。

2. visual viewport

代表 瀏覽器可視區域的大小，可以通過 window.visualViewport 來獲取

3. ideal viewport

最理想的 viewport ，寬高等于設備屏幕的物理寬高，剔除了分辨率的干擾，針對同一 ideal viewport 設備開發的網站，都將完美呈現。

理想視口可以 用過 meta標簽去實現

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

寬度等于設備寬度，初始頁面縮放1倍（就是不縮放），最小最大縮放1倍，禁止用戶縮放

最后這個 viewport-fit=cover 是針對iphone劉海屏的，劉海跟ios底部操作欄會使網頁不能全屏

淘寶移動端meta設置

<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

移動端適配歷史

原始不適配 -- viewport控制縮放 -- 媒體查詢 -- 響應式布局 -- 移動端分流 -- Rem

移動端分流

移動端分流原理，主要是通過 UA（User Agent用戶代理）去判斷上網設備, 比如移動端輸入 pc網址 https://www.toutiao.com/，就會跳轉到 https://m.toutiao.com/ （移動端適配地址）。

附上判斷的js代碼

function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

Rem

現在項目適配使用的是 vw + rem

rem（font size of the root element）是指相對于根元素（html）的字體大小的單位。
vw是可視窗口的寬度單位，不受設備分辨率影響, width: 1vw 等于 width: 1%。倘若 瀏覽器寬1000px，1vw = 10px

移動設備的原型圖一般都是二倍圖（寬750px）

現在移動互聯網的發展，現在很多企業做網站開發不僅是電腦端的網站，還包括了移動端網站的開發，移動端網站開發和pc端是有一定的區別，比如移動端的頁面更小，移動端的打開和加載速度都遠低于電腦端訪問網站，其實除過這兩點，pc端網站的建設和移動端網站開發都是有很多的區別，今天我們一起來了解下。

移動端網站和pc端的網站在設計風格上是不太一樣的，很多人說手機站不就是pc站的縮小版么，為什么還要不一樣？這里大家要注意，手機網站和pc網站的像素大小不同，另外一點就是手機屏幕操作和電腦操作是不一樣的，所以有些功能電腦網站操作很簡單，但是手機站操作很麻煩，所以手機網站開發就不能全部抄pc端網站。

另外一點就是手機網站開發語言和pc端網站是不一樣的，以前手機網站的語言是HTML寫的，而現在已經采用了HTML5技術，可以自適應所有尺寸的手機屏幕，有著更強大的網頁表現能力，也優于其他前端語言的aeo性能，讓企業能把握住移動搜索引擎的流量入口。而css3的技術可以讓手機網站的布局字體、顏色和背景有更炫麗的效果。

做好手機網站的建設也更方便用戶去看，如果一個企業只有一個電腦端網站，沒有一個手機端的網站，那么手機訪問的話打開網站的頁面就是不完整的，因為手機訪問電腦網站是在是太大了，所以需要縮放，而如果有手機網站的話，就會自適應成更適合手機網站訪問的頁面，這樣看起來就更加的清楚，也更加的方便，這就是手機網站建設的重要性，如果企業要做移動端營銷，那么手機網站建設是很有必要的。