@media 查詢在 Chrome 中運行良好，但在移動設備上無法運行

Question

我用 React 做了一個應用程序。 筆記本電腦 Chrome 上一切正常。 但是當我檢查我的手機時，@media 查詢不起作用。 我幾乎閱讀了有關 stackoverflow 的所有問題和答案。 我找不到解決方案。

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

和我的代碼示例

.home-wrapper {
  position: relative;
  width:1366px;
}
@media screen and (max-width: 400px){
  .home-wrapper {
    width:375px;
}

你可以幫幫我嗎？ 謝謝。

Answer 1

很可能您的手機寬度超過400px ，因此沒有進入媒體查詢條件。

您可以在不使用媒體查詢的情況下實現您想要的，只需使用帶有width max-width ，如下所示：

 .home-wrapper { position: relative; max-width:1366px; width: 100%; /*or another value you want here like 90% or 90vw */ /* just for demo */ height: 200px; background: lightblue }

 <div class="home-wrapper"></div>