移動站適配學習記錄

最近在學習移動前端開發的相關知識，在這裏作個記錄，方便之後查看。

一，視口的知識

佈局視口(layout viewport)

它的做用是給css佈局限制一個最大寬度；

（pc/移動端）佈局視口尺寸能夠經過document.documentElement.clientWidth/clientHeight獲取；

pc端

（1）屏幕尺寸

經過screen.width/height能夠獲取顯示屏的寬和高；

（2）佈局視口

在pc端，css佈局視口等於瀏覽器窗口的內在尺寸。
瀏覽器窗口的內在尺寸經過window.innerWidth/Height獲取；window.innerWidth包含了滾動條的寬度；
在沒有滾動條的時候，經過window.innerWidth和document.documentElement.clientWidth值是同樣的；

移動端

（1）佈局視口

瀏覽器廠商爲了讓用戶在小屏幕下網頁也可以顯示地很好，因此把佈局視口寬度設置的很大，通常在 768px ~ 1024px 之間，最多見的寬度是 980px。

因此，在手機上，佈局視口與移動端瀏覽器屏幕寬度再也不相關聯，是徹底獨立的，這個瀏覽器廠商定的視口被稱爲佈局視口。

（2）視覺視口（visual viewport）

在移動設備端，視覺視口能夠簡單的理解爲設備的物理屏幕的可視區域。它用來承載佈局視口。

視覺視口的值是固定的，只和設備的型號有關。它的大小和css像素值是相同的。能夠經過window.innerWidth/innerHeight來獲取。好比：

　　iphone4 : 320*480px;

　　iphone6 : 375*667px;

（3） 理想視口（ideal viewport）

佈局視口明顯對用戶是不友好的，徹底忽略了手機自己的尺寸。因此蘋果引入了理想視口的概念，它是對設備來講是最理想的佈局視口尺寸。理想視口中的網頁對用戶來講，是最理想的寬度，用戶進入頁面的時候不須要縮放。

如今討論所謂的『最理想的寬度』究竟是多少？其實，若是咱們把佈局視口的寬度改爲屏幕的寬度不就不用縮放了麼。常見的能夠以下設置viewport meta標籤；

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

width用來定義layout viewport的寬度；在這裏，將device-width的寬度值賦給layout viewport；device-width即爲設備寬的css像素個數；若是不指定width屬性或者scale屬性，或者移除viewport meta標籤，則佈局視口將恢復默認的值，如iphone爲980px;

initial-scale
initial-scale用於指定頁面的初始縮放比例，也能夠實現理想視口。以下，表示將佈局視口按device-width的1倍縮放。即佈局視口大小等於設備寬度；
<meta name="viewport" content="initial-scale=1">

二，移動站適配的方法

1，經過rem佈局 + 媒體查詢實現

思路：在不一樣分辨率範圍，給html設置不一樣的font-size大小。頁面基於rem來佈局，從而實如今不一樣分辨率的設備裏看到相同的效果。
實現：
（1）設計稿基於iphone6,爲750px寬。設置一個基數50（即在750px的設計稿裏，html字體大小設置爲50px，body字體大小設置爲24px），750/50=15rem，便可以獲得頁面對應的rem數值。其它元素均可以經過px/50的方式轉換成rem值來進行佈局。
（2）計算出在不一樣分辨範圍裏的html字體大小，從而使頁面自動調整樣式。以min-width:320px爲例，html字體大小爲：320/15= 21.3333333px；即在320--359範圍內，html字體大小爲21.3333333px;在min-width:360px範圍內，360/15=24px;
例子：【參考網站：http://m.suning.com/】

缺點：很難肯定合適的臨界點；

2，直接經過流式佈局實現

思路：對於一些簡單的移動站，直接能夠用百分比來實現寬度自適應，高度用px固定便可
實現：
（1）頂部和底部，寬度100%，高度px設置，字體應用rem來設置，可是這裏並無設置不一樣分辨率下的html的字體大小，所以使用默認的字體大小16px來進行換算，字體仍是固定大小。

例子：【參考網站：https://m.lagou.com/】

補充：對於列表，這裏的佈局實現方式以下，它是經過左邊圖片向左浮動，再給右邊內容容器設置一個padding-left值來實現。在移動端，還能夠運用flex彈性佈局來實現。

3，利用JS來動態更改html字體大小

思路：假設拿到的設計稿是750px寬；設置一個基數100px，獲得設計稿寬度爲7.5rem;便可以獲得html字體的計算方式：750/7.5 = 100px;利用js按此方式來動態更改html字體大小。
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + "px"; 
實現：
（1）設計稿基於iphone6,爲750px寬。頁面元素的佈局，以設計稿裏的像素值除以100便可獲得對應的rem值。

例子：【參考網站：http://3g.163.com/touch/all?n...】

4，利用JS來動態縮放佈局視口

思路：前面幾種方法，都須要添加"<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">"，保證以理想視口（寬度等於css像素）來佈局。在當前這種適配方案裏，倒是讓佈局視口的寬度等於設備的物理像素，而後將佈局視口進行縮放，從而實現以理想視口來佈局。
實現：
（1）設計稿基於iphone6,爲750px寬。iphone6的物理像素爲750px,設置一個基數10(即此時設計稿寬爲10rem)，html字體大小爲：750/10 = 75px;根據這個字體大小能夠計算出頁面其它元素的rem值；
（2）device-width:指代比例爲100%時(即scale=1)屏幕寬度的CSS像素數值。device-width的計算公式爲：設備的物理分辨率/(devicePixelRatio scale)；要保證device-width等於物理分辨率，須要獲取devicePixelRatio值，這個值是固定的，所以，只要devicePixelRatio scale = 1，便可知足要求。
【我的理解：這裏的device-width只是值和css像素值相同，設備的css像素值是不能改變的。device-width卻能夠調整大小。】
（3）iphone6的devicePixelRatio=2， scale = 0.5，原來佈局視口等於設備物理像素等於750px，縮放0.5倍後，佈局視口寬度爲375px;等於理想視口。
「<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">」
例子：【參考網站：https://m.taobao.com/#indexht...】

參考文章：
1，https://gold.xitu.io/entry/57...
2，http://blog.doyoe.com/2015/10...
3，https://github.com/riskers/bl...
4，http://www.cnblogs.com/well-n...