今天在做適配手機版時，chrome調到手機版，但是還是顯示PC端的樣式，無法展現出手機端的樣式；
開始的時候還以為是chrome版本的問題，最新版本的chrome62.0是有很多變化的，而之前工作中使用最多的chrome來調試，是帶有標尺等等。
搜索chrome版本無果，想了下，按照道理chrome版本越新，功能應該更好用才是。
百度了一下，發現是因為這句話：<meta name="viewport" content="width=device-width, initial-scale=1.0">；
后來我就看了下百度首頁的手機版，也發現了這句話：
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
於是我加上這句話就解決了。
回過頭，我再看看bootstrap文檔起步的說明：
基本模板：
使用以下給出的這份超級簡單的 HTML 模版，或者修改這些實例。我們強烈建議你對這些實例按照自己的需求進行修改，而不要簡單的復制、粘貼。
拷貝並粘貼下面給出的 HTML 代碼，這就是一個最簡單的 Bootstrap 頁面了。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </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 這個屬性了，所以這個屬性我們要避免進行使用 。