爲什麼$（window）.width（）會比CSS max-width大？

在我的CSS我有這樣的代碼：

html { 
background:blue; 
} 
@media screen and (max-width: 980px) 
html { 
background:red; 
}

因此，當瀏覽器窗口小於980px，背景變成紅色，的其餘時間，它是藍色的。

我把窗口大小調整爲970px（根據CSS），背景是紅色的。但是，當我使用jQuery來做一個alert($(window).width())，這給了我一個彈出說1000px

爲什麼$（window）.width（）報告比CSS預期更大的值？

來源

2013-04-09 John

[內部寬度和外部寬度奇怪在桌面上]的可能重複（http://stackoverflow.com/questions/22468878/innerwidth-and-outerwidth-oddness -on桌面） – 2017-01-10 08:33:02

我想出了這個問題。

在Chrome中，我按下了CTRL MINUS幾次，因此窗口縮放的方式有較小的文本。一旦完成，jQuery將會報告與css報告不同的窗口寬度

來源

2013-04-10 00:32:49 John

我相信可見頁面和窗口大小之間存在差異。在香草JS，所以據我的理解：

window.innerWidth, window.innerHeight

（頁面的可視寬/高）

window.outerWidth, window.outerHeight

（瀏覽器外寬/高）

這讓我覺得，這是可能原因 - 返回的值是瀏覽器窗口的外部寬度。 Source

來源

2013-04-09 23:43:48

沒有足夠的背景知道你的瀏覽器到底發生了什麼。

我寫了下面的頁面來測試所有的東西：

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<style> 
    html { background:blue; } 
    @media screen and (max-width: 980px) { 
     html { background:red; } 
    } 
</style> 
</head> 
<body>test</body> 
</html>

並與檢查測試之後，$(window).width()的鉻督察裏面顯示它應該是什麼。

雖然屏幕是紅色的，下面的樣式設置在檢查：

margin-left: 8px; 
margin-right: 8px; 
width: 964px;

...和jQuery在控制檯顯示：

> $(window).width() 
980

總寬度爲寬度+所有的利潤。因此，它是：964 + 8 + 8 = 980

在我看來，這種不一致是由利潤率和可能的邊界設置你測量標記和任何父標籤引起的。我沒有看到這種行爲的任何其他原因。

我希望這會有所幫助。

來源

2013-04-10 00:04:43

爲什麼$（window）.width（）會比CSS max-width大？

回答

相關問題