【外行學IT】手機網頁自適應之rem和viewport

時間 2019-11-12

標籤外行學IT 手機網頁自適應 rem viewport 欄目 HTML 简体版

原文原文鏈接

在寫手機網頁時，對於像素的問題會很是困惑，初學者不少時候會由於那麼一個小點的問題解決不了，或者沒法理解透徹就放棄了學習。html

我在學習寫手機網頁時也困惑了許久，出現過下面的問題：算法

圖片素材按照640px*330px像素設計，放入img，而且img設置了鋪滿全屏style：chrome

.img{
    width:100%;
    height:16.5rem;
]

PS:我將html設置了瀏覽器

html{
    font-size:20px;    
}

因此按照rem的算法，img的高度應該是330px/20px=16.5rem（rem怎麼用？下片文章會用咱們外行的白話來講明）學習

這時候在chrome谷歌瀏覽器中調試效果，發現圖片寬度變成了980px，而後各類算rem算不對，實在沒想明白，爲啥本身的圖片明明是640px寬，怎麼到了瀏覽器裏被放大到980了，後來翻閱了網上各大神的文章，發現移動設備上的瀏覽器都會把本身默認的viewport設爲980px或1024px網站

因此這個時候須要在<head>裏面加入下面的一段代碼：spa

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

該meta標籤的做用是讓當前viewport的寬度等於設備的寬度，同時不容許用戶手動縮放。也許允不容許用戶縮放不一樣的網站有不一樣的要求，但讓viewport的寬度等於設備的寬度，這個應該是你們都想要的效果，若是你不這樣的設定的話，那就會使用那個比屏幕寬的默認viewport，也就是說會出現橫向滾動條。scala

這個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表明容許