我們有一個主要問題，即出于某種原因，Chrome 過早地觸發回應式媒體查詢。因此，它不是以 1000 像素觸發，而是以 984 像素左右觸發。包含任何值的最大寬度/最小寬度都沒有區別。就好像它關閉了大約 14 到 24 像素，這取決于只有它理解的因素。
也沒有可能導致此問題的沖突查詢（我們在專案中的“新頁面”上嘗試過），甚至破壞了主樣式表，但問題仍然存在。此外，我們沒有通過使用 Javascript 或 CSS 操作視窗/檔案或正文的寬度、邊距、縮放/縮放來做任何時髦的事情。
我們對此完全感到困惑，并嘗試了幾天來修復 檢查 Stackoverflow 等，但到目前為止無濟于事。
代碼如下：
div {
background: orange;
}
@media only screen and (min-width: 1000px) {
div {
width: 100px;
height: 100px;
background: green;
}
}
一些地方和背景：
- 這以前有效，但是突然間我們遇到了這個錯誤......
- 它發生在 Chrome 和 Brave 中，但在 Edge 和 Firefox 中運行良好。我們已經嘗試了其他幾臺機器和不同版本的 Chrome，但問題仍然存在。我們只能猜測可能是專案中引入了某些東西導致了這種情況，但我們不知道是什么原因。
- 瀏覽器縮放正確 @ 100%
- 元標記視口正確就位
- 嘗試了像 1000.0px 這樣的“十進制修復” - 但它不起作用......
- 開發工具說視窗大小為 1000 像素，但 Chrome 僅在 983 像素左右觸發代碼
- 代碼在測驗檔案中作業（使用與專案中相同的索引/模板）并且 Chrome 100% 正確處理媒體查詢
- 使用 Bootstrap 4.5.3 回應解決方案
- 以前作業過
有任何想法嗎？有什么方法可以“重置”Chrome 的媒體查詢或我們缺少什么？StackOverflow 中其他類似問題的答案似乎不起作用，這讓我們認為這可能是一個單獨的問題或新錯誤？
非常感謝任何幫助/見解！:)
uj5u.com熱心網友回復：
也許您的元標記缺少具有值的內容屬性：width=device-width, initial-scale=1？
<meta name="viewport" content="width=device-width, initial-scale=1">
據我所知，chrome 需要這些屬性和值才能在自定義媒體查詢中正常作業
編輯
在聊天中與@user2381937 討論并閱讀一些外部資源后：https ://inspirnathan.com/posts/2-media-query-inspector-chrome/
https://www.sitepoint.com/rwd-scrollbars-is-chrome-better/
我們發現 chrome 和 firefox 在渲染頁面時考慮滾動條寬度的方式不同。前進的道路是交換查詢斷點以解決偏移量或進行瀏覽器特定查詢。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/312658.html