移動WEB開發之viewport

問題：

在codepen上寫了一個響應式頁面，調試的時候沒有問題。結果放到網站上，在手機上打開以後居然和在電腦中的佈局是同樣的。

       

 

查閱資料以後知道響應式佈局應該有這樣一句話：<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

這是怎麼回事呢？爲何寫了width=device-width以後就能夠正確的顯示爲圖二那樣呢？

 

Viewport誕生

這件事情要從viewport出現以前開始講起。

在移動設備還不普及的時候，網頁設計根本不考慮手機端的感覺，若是用手機設備（屏幕寬度爲320px）打開一個定寬（width:980px）的網頁，就會出現滾動條，要滑動才能看完整個頁面：

 

這並非最糟糕的。最糟糕的是，若是是流式佈局。也就是一個盒子的寬度是百分比，好比說20%，那麼在一個屏幕寬度爲320px的手機上打開以後，這個盒子的實際寬度就會是320px*20%=64px。而它裏面的以px爲單位的文字，依然是那麼大。這就會出現一行中只能容下那麼幾個字的狀況，閱讀體驗是很是差的。

 

爲了解決這個問題，Apple提出了viewport這個概念，他就至關於創建在設備屏幕上的一個單獨的視口，用於展現網頁內容，讓CSS與設備寬度徹底脫離關係。也就是說，在CSS中的百分比是由它的寬度來決定的，而不是由設備屏幕的物理寬度。Apple給它一個默認寬度，980px。

這也就是爲何個人響應式網頁在手機中打開後和在電腦上的佈局相同了，由於我是在viewport中打開它，而viewport的寬度是980px，並無知足breakpoint，因此不會改變佈局。

隨着移動端的普及，這個問題就愈來愈棘手，那些專門爲手機設計的網頁（寬度爲320px），在手機上打開以後倒是這樣的：

 

因此須要提供一些屬性，來設置viewport的寬度或高度。

<meda name="viewport" width="device-width">

這樣，這個網頁就能夠正確的顯示了：

 

參考：

• 什麼是viewport，爲啥須要viewport
• A pixel is not a pixel is not a pixel