怎麼檢測頁面那些元素超出設備寬度

寫頁面的時候如果頁面元素的寬度超出設備寬度就會出現橫向滾動條，這對移動端的頁面影響還是很大的，那麼怎麼去檢測到底是那些元素的寬度超出了設備的寬度了呢？

先看看是哪些原因導致這種現象：

1. 寬度使用了width:100%，但是又有padding或者border，由於瀏覽器默認的盒模型是content-box，也就是說width:100%是內容的100%，這樣再加上padding和border纔是元素實際的寬度，這樣就超出了設備的寬度

2. 浮動佈局，子元素的總寬度大於或等於100%，css盒模型中規定子元素的總寬度應該小於100%，因爲總會有一些margin，padding和border需要佔據一定的空間，使用浮動佈局的時候應該將這些都考慮進來。比如3列的浮動佈局，三個子元素的寬度不應該是33.3%，這樣就會出現標題說的那種情況。

再來看看怎麼用js去檢測這種現象到底是那些元素導致的，這個方法不一定靈驗，只是提供一種參考，直接在頁面的console裏輸入以下代碼：

$('*').each(function(index, item){
  //也檢測下隱藏的元素
  $(item).show();
  if($(item).width() > $(window).width()){
    console.log(item)
  }
});

最後再教一種終極方法，就是打開chrome調試器，一個一個元素的刪除看看還出不出先橫向滾動條，如果刪除不出現了那肯定是這個元素或者它的子元素搞的鬼，就繼續刪除子元素，直到找到最後的那個元素。