關於網頁隨手機比例縮放的問題。。。 移動前端開發之viewport的深入理解
在做適配手機版時，chrome調到手機版，但是還是顯示PC端的樣式，無法展現出手機端的樣式；
開始的時候還以為是chrome版本的問題，搜尋chrome版本無果；
想了下，按照道理chrome版本越新，功能應該更好用才是。
聯網搜尋並檢視一些手機版網頁的原始碼，發現很多大網站的手機版都有如下一句話：
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
於是我加上這句話就解決了。
回過頭，我再看看bootstrap文件起步的說明：
基本模板：
使用以下給出的這份超級簡單的 HTML 模版。
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!--上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ --> 8 <title>Bootstrap 101 Template</title> 9 10 <!-- Bootstrap --> 11 <link href="css/bootstrap.min.css" rel="stylesheet"> 12 13 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->14 <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 15 <!--[if lt IE 9]> 16 <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> 17 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> 18 <![endif]--> 19 </head> 20 <body> 21 <h1>你好，世界！</h1> 22 23 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 24 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 25 <!-- Include all compiled plugins (below), or include individual files as needed --> 26 <script src="js/bootstrap.min.js"></script> 27 </body> 28 </html>
下面摘抄自其它部落格資料：
轉載自部落格 http://blog.csdn.net/u012402190/article/details/70172371
我們在開發移動裝置的網站時，最常見的的一個動作就是把下面這個東西複製到我們的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個屬性(暫且把content中的那些東西稱為一個個屬性和值)，如下：
| width | 設定layout viewport 的寬度，為一個正整數，或字串"width-device" |
| initial-scale | 設定頁面的初始縮放值，為一個數字，可以帶小數 |
| minimum-scale | 允許使用者的最小縮放值，為一個數字，可以帶小數 |
| maximum-scale | 允許使用者的最大縮放值，為一個數字，可以帶小數 |
| height | 設定layout viewport 的高度，這個屬性對我們並不重要，很少使用 |
| user-scalable | 是否允許使用者進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許 |
這些屬性可以同時使用，也可以單獨使用或混合使用，多個屬性同時使用時用逗號隔開就行了。
此外，在安卓中還支援 target-densitydpi 這個私有屬性，它表示目標裝置的密度等級，作用是決定css中的1px代表多少物理畫素
| target-densitydpi | 值可以為一個數值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個字串中的一個 |
特別說明的是，當 target-densitydpi=device-dpi 時， css中的1px會等於物理畫素中的1px。
因為這個屬性只有安卓支援，並且安卓已經決定要廢棄target-densitydpi 這個屬性了，所以這個屬性我們要避免進行使用 。