NextJs SSR 无法识别 CSS 移动媒体查询

Question

我刚刚将 Nextjs SSR 集成到我的 React 项目中。在此之前，我的 css 移动响应媒体查询运行良好。现在，当我使用 Chrome 的工具在移动屏幕尺寸甚至我自己的设备上查看我的应用程序时，我得到的视图就像在桌面上一样。

服务器似乎正在呈现整个页面并假定桌面大小，而不是在它到达客户端时重新呈现。如果是这样，我如何告诉它用户是移动的并使用那些 CSS 查询？

我的媒体查询似乎不起作用。我没有在 JS 中使用 CSS，也许我应该使用？我为每个组件使用常规 css 文件。

.Footer {
    width: var(--webMaxContentWidth);
    height: 200px;
    background: #368efb;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 768px) {
    .Footer {
        width: 100%;
        height: 400px;
        margin: 0 20px;
    }
}

感谢任何帮助！

Answer 1

之前，React 会自动在 SPA 的 <head> 中插入以下内容：

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

一旦您迁移到 SSR，责任就转移到了开发人员自己添加这一点。没有它，当涉及到 @media 查询断点时，您会遇到一些非常意外的行为。正如您在解决问题后发现的那样，这个问题已经解决 already。

NextJs SSR 无法识别 CSS 移动媒体查询

NextJs SSR not recognizing CSS Media queries for mobile

css

reactjs

next.js