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 Media查询

1 个答案: