【外行學IT】手機網頁自適應之rem和viewport
阿新 • • 發佈：2019-09-17
在寫手機網頁時，對於畫素的問題會非常困惑，初學者很多時候會因為那麼一個小點的問題解決不了，或者無法理解透徹就放棄了學習。
我在學習寫手機網頁時也困惑了許久，出現過下面的問題：
圖片素材按照640px*330px畫素設計，放入img，並且img設定了鋪滿全屏style：
.img{
width:100%;
height:16.5rem;
]
PS:我將html設定了
html{
font-size:20px;
}
所以按照rem的演算法，img的高度應該是330px/20px=16.5rem（rem怎麼用？下片文章會用我們外行的白話來說明）
這時候在chrome谷歌瀏覽器中除錯效果，發現圖片寬度變成了980px，然後各種算rem算不對，實在沒想明白，為啥自己的圖片明明是640px寬，怎麼到了瀏覽器裡被放大到980了，
所以這個時候需要在<head>裡面加入下面的一段程式碼：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
該meta標籤的作用是讓當前viewport的寬度等於裝置的寬度，同時不允許使用者手動縮放。也許允不允許使用者縮放不同的網站有不同的要求，但讓viewport的寬度等於裝置的寬度，這個應該是大家都想要的效果，如果你不這樣的設定的話，那就會使用那個比螢幕寬的預設viewport，也就是說會出現橫向滾動條。
這個name為viewport的meta標籤到底有哪些東西呢，又都有什麼作用呢？
meta viewport 標籤首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動裝置的viewport問題。後來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支援，事實也證明這個東西還是非常有用的。
在蘋果的規範中，meta viewport 有6個屬性，如下：
| width | 設定layout viewport 的寬度，為一個正整數，或字串"width-device" |
| initial-scale | 設定頁面的初始縮放值，為一個數字，可以帶小數 |
| minimum-scale | 允許使用者的最小縮放值，為一個數字，可以帶小數 |
| maximum-scale | 允許使用者的最大縮放值，為一個數字，可以帶小數 |
| height | 設定layout viewport 的高度，這個屬性對我們並不重要，很少使用 |
| user-scalable | 是否允許使用者進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許 |
這些屬性可以同時使用，也可以單獨使用或混合使用，多個屬性同時使用時用逗