除非你設計的網頁是故意在手機上只要顯示一部分，一般在 RWD 網頁上，我們都會設成網頁同裝置寬度，就像下面的設定：

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

但是，很常常啊，就會發現咦？當使用者滑動網頁上下時，網頁也會稍微的左右滑動，整個網頁在手機上，就好像是停在一塊冰上，上下滑動時，連帶左右也會一起動，就有一種扭啊扭啊的感覺，真的很不好的使用者體驗，所以一定要改才上下滑動時，左右不要搖晃才行，怎麼改呢？

不容易，基本上就要一塊一塊的查網頁區塊的大小，有沒有哪一塊超過的，這裡是我發現的一些魔鬼細節，希望對辛苦的前端設計師有幫助，也希望這網上的能人異士，也能方想一下，因為這，算是 Bug 吧，還真是難抓。

使用 Bootstrap 的人，很常會遇到有這左右搖晃的問題，主要的原因就是在 Bootstrap 的 .row 是設成：

.row {
  margin-left: -15px;
  margin-right: -15px;
}

Bootstrap 的文件其實說得很清楚，因為 .container_fluid 有 padding-left: 15px; padding-right: 15px; 所以會互相取消，但是啊，這樣就會造成上下滑動網頁時，左右會搖晃，有沒有解法呢？有，最簡單的方法就是蓋掉這些值，也有人說只要把 .row 包在 .container 或是 .container-fluid 就好，或是用 .clearfix 等等，各位就試試吧，蓋掉 .container_fluid 跟 .row 的 margin 與 padding 是最簡單的方法，但是你要好好的檢查你的網頁，有沒有“變形”，因為這原先的設定是為了要讓 .row 的內容會與網頁左右對齊。

常想，CSS 常常被這樣貼來蓋去的，總有一天會被玩壞，到時候，會不會效率變低到只有重練，那可是很可怕的。