0 問題描述 由於需要演示觸控操作，採購了SurfacePro，SurfacePro的推薦解析度為2736×1824，且預設縮放比例為200%，IE瀏覽器的預設縮放比例也是200%，這樣就導致右側出現了豎直滾動條。整個界面的高度是通過計算得出並控制的，按理來說不應該出現這個垂直方向的滾動條。 正常情 ...
0 問題描述
由於需要演示觸控操作，採購了SurfacePro，SurfacePro的推薦解析度為2736×1824，且預設縮放比例為200%，IE瀏覽器的預設縮放比例也是200%，這樣就導致右側出現了豎直滾動條。整個界面的高度是通過計算得出並控制的，按理來說不應該出現這個垂直方向的滾動條。
正常情況
滾動條
1 問題排查
由繁化簡，快速定位
為排除界面元素干擾，直接新建了一個乾乾凈凈的頁面，裡面除了引用了原頁面所使用的CSS外，只留了一個包含test文本的h1標簽。
<!DOCTYPE html> <html> <head> <link href="~/Content/css/bootstrap.min.css" rel="stylesheet"> <link href="~/Content/css/font-awesome.css" rel="stylesheet"> <link href="~/Content/css/animate.css" rel="stylesheet"> <link href="~/Content/css/style.css" rel="stylesheet"> <link href="~/Content/plugins/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <link href="~/Content/plugins/ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>test</h1> </body> </html>
對於這樣一個頁面，在SurfacePro的高解析度，200%縮放比例下仍然會出現滾動條，進一步定位，逐條刪除上方的css樣式引用，發現當刪除bootstrap.min.css的時候，滾動條就神奇的消失了，至此可以判斷肯定是因為bootstrap的樣式引起的。但具體是什麼原因，經過F12查看，排查字體、Margin等各種設置，均沒有找到答案。
折半查找，逐一過濾
無奈下只好採用最原始粗暴，也是最簡單有效的折半查找排除法，無法是需要稍微耗費時間與耐心，查看bootstrap.css文件，一共7000多行，我們直接刪除大概前3500位置的css樣式，如果問題解決了，就說明問題出在前3500行的樣式中，如果問題沒解決，則可以肯定問題出在後面3500行樣式中，然後同樣對後面3500行取前1750行做刪除或註釋處理，進一步定位，如此反覆，終於確定了問題所在。大致在6800行處有這麼一句樣式：
@-ms-viewport { width: device-width; }
註釋掉，問題解決。
2 Viewport 與 device-width
既然找到了問題所在，難免要探究一下Viewport與device-width究竟是幹嘛的，有什麼用處，為什麼會引起這種問題。以下為網路上找到的解釋。
Viewport
viewport，翻譯為視口，也即可視區域的大小，PC端通過 window.innerWidth 和 window.innerHeight 獲取。
html元素也即文檔的寬度，來自於viewport的寬度，在PC端要加上滾動條的寬度才會與viewport的寬度一樣。因此，文檔的寬度最終來自於viewport的寬度，PC端通過 window.innerWidth 獲取。
而在移動端，情況將變得複雜。
首先，上面提到文檔的寬度來自於viewport的寬度，我們把這個viewport稱為layout viewport，因為它和佈局有關。在手機上面，因為手機的屏幕很小，當初iphone發佈時，為了顯示完整的桌面網頁，就把給layout viewport設置了一個980px的值。手機上，可以通過 document.documentElement.clientWidth 來獲取，我在安卓手機上測試也是980px。
但是這樣顯示網頁，那網頁的字體、元素都很小，小到打開這樣一個網頁，首先要做的就是放大頁面。為了提高可讀性，Apple允許通meta標簽來設置layout viewport的寬度，也即文章開頭的那行代碼。
但是，device-width又是什麼呢？
第一代iphone的解析度為320*480，屏幕尺寸為3.5寸。當時把layout viewport設置成與瀏覽器寬度一樣（而手機上瀏覽器寬度與手機屏幕寬度一樣）時，不用每次打開網頁放大了，而且顯示的字體與桌面上差不多，可讀性很好。因此就定義了一個device-width，即是手機的屏幕解析度，此時device翻譯為“設備”還合適。
但是第二代iphone發佈時，屏幕的解析度變成了480*960，而屏幕尺寸仍然為3.5寸，如果device-width仍然為手機的屏幕解析度寬度，那麼字體將會比第一代小很多。所以，維持device-width的值不變將會是個很好得選擇，能與前面相容。也因此，iphone上的device-width的值一直為320，只不過device再表示“設備”已經不合適了，實際上代表的是一個中間層。而Android也採用了這一概念，其device-width的值為360的多，360=540/1.5，360=720/2。
