（結論在最后面）
首先說明，一般視口標簽完整寫法：<meta name="viewport" content="width=device-width",initial-scale=1, maximum-scale=1,user-scable=no/>
那么為啥移動端要加個視口標簽呢？
首先我們可以試試不加視口標簽。
1 新建一個html
2 打開網頁調試台，選擇ipone6 如圖所示，可以看到iphone6的寬度為375px
3 html中寫一個寬度為375px的盒子，回到瀏覽器看效果。（隨意拖動盒子，發現明明盒子占滿了寬度卻出現了滾動條，那移動端肯定時不想要這種效果的）
4 加上最上面的視口標簽后，就發現盒子完全不能拖動了，這也正是我們需要的結果。
其實對於ipone6來說，拿到的設計圖寬度是750px的，為什么這里是375px呢？
因為這里有一個重要概念：設備像素比。 不知道也沒關系，只要記住加了視口標簽設備像素比才生效。（原來750px的寬度，現在用瀏覽器上方的尺寸375px）
下面給大家分析一下標簽里的內容：（這里就不引入布局視口與視覺視口的概念了，直接記下面結論，在切圖的時候明白是怎么回事就好了）
content="width=device-width",initial-scale=1
----這兩句話的功能是一樣的 .1使得css像素與設備獨立像素是一樣的也就方便了樣式書寫，2且加了這兩句移動端大部分瀏覽器不會改變布局視口，就不用擔心布局發生改變。3如果只寫其中一個，瀏覽器會擴展布局視口來容納這個元素，這樣兼容性就很復制。
initial-scale=1, maximum-scale=1
----禁止頁面縮放
user-scable=no
-----禁止旋轉
結論：移動端都要加視口標簽<meta name="viewport" content="width=device-width",initial-scale=1, maximum-scale=1,user-scable=no/>且寫完整。為什么呢？記：加了設備像素比才生效，才能按UI給你的設計圖寫頁面，才能使你的頁面具有移動端的特性（上面所提到的）。
750px(UI圖大小) / 2(設備像素比) = 350px(真正使用時的css像素)