媒體查詢以錯誤的寬度觸發

Question

我正在構建一個響應式頁面，媒體查詢以錯誤的寬度大小觸發。 我正在使用 Chrome。

@media screen and (max-width: 1200px) {
 .logo-pic {
    display: none;
}
}

例如，此規則有效，它只是以錯誤的大小觸發。 此規則在 1320 像素而不是 1200 像素處觸發。 我有 html 的元標記。 它似乎觸發了比正常情況更寬 100 像素左右的媒體查詢。

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

我檢查了我之前創建的響應式站點，這些斷點正確觸發。 我已經在不同的網站上測試了瀏覽器，媒體查詢也很好。

我發現了一個關於堆棧溢出的類似問題，但沒有得到解答。

媒體查詢斷點值錯誤

不確定是什么問題？

Answer 1

發生這種情況的一個常見原因是您將瀏覽器窗口縮放到 100% 以外的大小。 在您的瀏覽器中，選擇下拉菜單“查看”並確保將其設置為 100%。 如果放大或縮小，它會不恰當地觸發媒體查詢。

並且不要擔心感到尷尬。 它可能已經發生，或者會發生在每個人身上……但只有一次。

---

為了一起避免這個問題，您應該考慮使用相對單位（ em或rem而不是px ）定義媒體查詢。

---

您還可以使用 javascript 在頁面加載時強制將瀏覽器縮放級別設置為 100%。

document.body.style.webkitTransform =  'scale(1)';
document.body.style.msTransform =   'scale(100)';
document.body.style.transform = 'scale(1)';
document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;

Answer 2

只是一個簡短的補充，以防止其他人進一步搜索，即使這里給出了答案。

我的縮放已經設置為 100%，但問題仍然存在。 如果您遇到同樣的情況，答案很簡單：將縮放比例設置為 90%，然后再回到 100%，等等，在您想要的寬度上設置斷點。

Answer 3

您是否有 iframe（或模態或較小的窗口）使用媒體查詢加載相同的 CSS 表？ 如果是這種情況，則是緩存問題，您需要將 CSS 文件鏈接到一個愚蠢的參數，例如：

<link href="myCss.css?iframe=1" />

為了將 css 文件作為新文件加載而不是采用緩存版本......我希望我很清楚:)

Answer 4

另一個補充。 經過一個小時的調試，我意識到我已經編寫了多個媒體查詢，並且因為 css 文件是從上到下執行的，所以我覆蓋了以前的媒體查詢邏輯。 前任：

@media (max-width: 700px) {
 .some-class { background-color: red; }
};

// This will override the above styling (assuming max-width logic is true)
@media (max-width: 800px) {
 .some-class { background-color: yellow; }
};

Answer 5

我在 Chrome 中的媒體查詢也遇到了一些問題。

我一切換設備工具欄，縮放比例就錯了。 下列

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

修復了這個問題。

Answer 6

看看你的單位： rem ， em ， px 。

我剛剛遇到了這個問題，這是因為我的基本字體大小是 10px 並且我將max_width: 102.4rem放在媒體查詢中，但它在max_width: 102.4rem左右激活，而不是預期的 1024px。

它仍然在我的102.4em激活102.4em ，但是當我使用1024px時它按預期工作。

這是一篇文章，討論了我所暗示的一切：

https://zellwk.com/blog/media-query-units/

起初我錯過了投票最高的答案，因為我遇到了使用rem而不是px的問題。 顯然，問題的根源似乎是單位。

Answer 7

經過一個小時的沮喪之后，我最終在這個線程上結束了，最后我意識到我不小心使用了 min-height 而不是 min-width：

@media screen and (min-height: $sm) { }

代替...

@media screen and (min-width: $sm) { }

只是提醒一下，如果您遇到與我的手掌相同的問題，請快速檢查一下，已經晚了。

Answer 8

添加我的解決方案，因為沒有一個答案解決了我的問題：

我將滾動條的寬度設置為 10px（firefox 中的thin ），並且窗口的計算寬度沒有考慮滾動條的增加寬度，因此我的斷點比指定的@media查詢細 10px。

為了解決這個問題，我只是在查詢中添加了 10px（滾動條的寬度），然后轉向：

@media (max-width: 600px)

進入：

@media (max-width: 610px)

快樂編碼！

Answer 9

這些都沒有解決我的問題，但是我的問題是，在對為什么在 1000 像素處發生斷點感到困惑之后，是因為我使用的是響應式庫，並且我仍然在某些 JSX 組件中設置了斷點！

Answer 10

我最近遇到了這個問題，我發現是滾動條導致了這個問題。 我發現這個與問題有關的答案：

https://css-tricks.com/forums/topic/best-media-query- exclude-scroll-solution/

有2個建議的解決方案：

html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow-y: scroll;
    position: relative;
}

正如文章中提到的那樣，這個答案也有點棘手，即使所有內容都適合屏幕，它也會為您留下一個永久的滾動條。 因此，我不是它的忠實粉絲。

您也可以使用 JS 解決方案來解決這個問題。 文章提供了處理該問題的 git repo 鏈接。

最后，文章中沒有提到，如果滾動條不需要精確，您可以向媒體規則添加更多像素以適應滾動條。 如果是這樣，那么 JS 解決方案是您最好的選擇。

Answer 11

問題是 Chrome 將始終包含滾動條（與window.innerWidth完全一樣，與document.body.clientWidth或 jQuery 的$(window).width()相反）。

你只需要構建你的媒體查詢而不是像素完美，但在 javascript 邏輯中始終保持它與window.innerWidth一致。 否則，您將陷入溢出的黑客攻擊，而您不想進入那個兔子洞。