viewport原理和使用和設定移動端自適應的方法

標籤：一個   alt   scala   範圍   播放   標籤   還需   nim   擷取   

viewport原理和使用和設定移動端自適應的方法

HTML中：

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

　　

該meta標籤的作用是讓當前viewport的寬度等於裝置的寬度，同時不允許使用者手動縮放。當然maximum-scale=1.0, user-scalable=0不是必需的，是否允許使用者手動播放根據網站的需求來定，但把width設為width-device基本是必須的，這樣能保證不會出現橫向捲軸。

meta viewport 的6個屬性：

width: viewport寬度height: viewport高度initial-scale: 初始縮放比例maximum-scale: 最大縮放比例minimum-scale: 最小縮放比例user-scalable: 是否允許使用者縮放

　　

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes">

　　對於這行代碼我們是不是每次都得把這五個屬性都寫上呢？答案肯定是否定的，例如：如果你添加了user-scalable=no 那麼，minimum-scale=1, maximum-scale=1這兩個屬性就沒必要追加了。因為你都已經禁止了使用者縮放頁面了，允許的縮放範圍也就不存在了。

//沒必要追加minimum-scale=1, maximum-scale=1這兩個屬性了
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

　　3個viewport 

（1）layout viewport——布局視窗

 如果把行動裝置上瀏覽器的可視地區設為viewport的話，某些網站會因為viewport太窄而顯示錯亂，所以這些瀏覽器就預設會把viewport設為一個較寬的值，比如980px，使得即使是那些為PC瀏覽器設計的網站也能在行動裝置瀏覽器上正常顯示。這個瀏覽器預設的viewport叫做 layout viewport。layout viewport的寬度可以通過 document.documentElement.clientWidth來擷取。 
（2）visual viewport——視覺視窗 
layout viewport的寬度是大於瀏覽器可視地區的寬度的，所以還需要一個viewport來代表瀏覽器可視地區的大小，這個viewport叫做 visual viewport。visual viewport的寬度可以通過 document.documentElement.innerWidth來擷取。 
（3）ideal viewport——理想視窗 
ideal viewport是一個能完美適配行動裝置的viewport。首先，不需要縮放和橫向捲軸就能正常查看網站的所有內容；其次，顯示的文字、圖片大小合適，如14px的文字不會因為在一個高密度像素的螢幕裡顯示得太小而無法看清，無論是在何種密度螢幕，何種解析度下，顯示出來的大小都差不多。這個viewport叫做 ideal viewport。 
ideal viewport並沒有一個固定的尺寸，不同的裝置有不同的ideal viewport。例如，所有的iphone的ideal viewport寬度都是320px，無論它的螢幕寬度是320還是640。 
ideal viewport 的意義在於，無論在何種解析度的螢幕下，針對ideal viewport 而設計的網站，不需要縮放和橫向捲軸都可以完美地呈現給使用者。

viewport設定移動端自適應的方法：

 

<meta name="viewport" content="width=device-width, initial-scale=1">

　　

viewport原理和使用和設定移動端自適應的方法