六，前端---viewport

移動設備上的viewport就是設備的屏幕上能用來顯示咱們的網頁的那一塊區域，再具體一點，就是瀏覽器上用來顯示網頁的那部分區域，但viewport又不侷限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域小。

這裏須要注意三點：

（1）：瀏覽器的默認的viewport叫作layout viewport，這個寬度能夠經過document.documentElement.clientWidth來獲取。

（2）：然而layout viewport的寬度是大於瀏覽器的可視區域的寬度的，因此咱們還須要一個viewport來表明瀏覽器可視區域的大小，咱們叫它visual viewport。visual viewport的寬度能夠經過window.innerWidth來獲取。

（3）：目前愈來愈多的網站都會爲移動設備進行單獨設計，因此必須有一個可以完美適配移動設備的viewport，這就須要第三個viewport---移動設備的理想viewport（ideal viewport）。

總結：ideal viewport是最適合移動設備的viewport，ideal viewport的寬度等於移動設備的屏幕寬度，只要在css中把某一元素的寬度設爲ideal viewport的寬度（單位用px），那麼這個元素的寬度就是設備屏幕的寬度，也就是寬度爲100%的效果。

利用meta標籤對viewport進行控制

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

width=device-width表示此寬度不依賴於原始像素（px），而依賴於屏幕寬度。全部瀏覽器都能把當前的viewport寬度變成ideal viewport的寬度，但要注意的是，在iPhone和iPad上，不管是豎屏仍是橫屏，寬度都是豎屏時ideal viewport的寬度。

注：

rem是css3新增的一個相對單位，也是em的升級版，由於rem相對的只是html根元素，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。