【外行學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代表允許 |
這些屬性可以同時使用,也可以單獨使用或混合使用,多個屬性同時使用時用逗