爲什麼我的網站在<495px寬時引入滾動條？

當我打開Chrome開發人員工具並調整我的網站大小時，它整齊地告訴我寬度。爲什麼我的網站在<495px寬時引入滾動條？

我的網站在495px下降時添加了一個水平滾動條。這很奇怪，因爲我需要它至少有響應或彈性下降到480px。

我使用寬度的百分比，所以我很努力地找到阻止網站進一步縮小的CSS。

如果您在整個body元素爲480px上設置了min-width，可能會設置電話屏幕的下限，並且頁面內容足夠長以添加垂直滾動條，則會發生這種情況。

Chrome瀏覽器的測量中沒有考慮垂直滾動條，寬度爲15px，當工具讀取495px時，出現水平條，因爲它實際上是480 + 15px。

可以說它是Chrome中的一個bug，也許它只是它的工作方式。無論如何，你最好拿出min-width，然後讓它彎曲超過480px。

2014-01-20 21:08:18

或者如果你是用膠帶做事情的粉絲，你可以將'overflow-x：hidden'放在身上。 –

由於內容寬度大於480px，因此發生這種情況。當您的頁面高度高於瀏覽器時，情況也是如此。嘗試CSS媒體查詢設置CSS樣式根據您的瀏覽器寬度。（這被稱爲響應式網頁）

2014-01-20 21:11:09 Ricbermo

內容寬度爲480px，因爲它在主體上具有「最小寬度」。問題在於Chrome使內容寬度顯示爲495px，並且不會再縮小/縮小。 Chrome會誤導性地將滾動條的寬度添加到視圖端口的寬度。 –

回答