NextJs s-s-r 无法识别移动设备的 CSS 媒体查询
Posted
技术标签:
【中文标题】NextJs s-s-r 无法识别移动设备的 CSS 媒体查询【英文标题】：NextJs s-s-r not recognizing CSS Media queries for mobile 【发布时间】：2019-07-09 03:23:59 【问题描述】：我刚刚将 Nextjs s-s-r 集成到我的 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;
任何帮助表示赞赏！
【问题讨论】：
你有这个项目的链接吗？我想在打开开发工具的情况下看到这个。 @AndyHoffman 嘿！谢谢回复。我目前没有指向它的链接。 当您以正确的屏幕宽度查看.Footer 以使媒体查询正常工作时，它是否会显示在开发工具检查器中？样式是否以某种方式被覆盖？
@AndyHoffman .Footer 确实显示在开发工具检查器中，但它以错误的样式显示（不是媒体查询样式）。我将在我的帖子中添加默认样式。
很抱歉，这是一个显而易见的问题，但您的<head></head> 中有<meta name="viewport" content="width=device-width, initial-scale=1.0"> 吗？
【参考方案1】：
之前，React 会自动在您的 SPA 的 <head> 中插入以下内容：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
一旦您转移到s-s-r，责任转移到开发人员自己添加这个位。没有它，当涉及到@media 查询断点时，您会遇到一些非常意外的行为。正如您在解决问题后发现的那样，这已经解决了already。
【讨论】：
这给我带来了一段时间的问题，尝试了一些其他搜索词，但找不到有用的答案。很高兴我终于找到了这个。以上是关于NextJs s-s-r 无法识别移动设备的 CSS 媒体查询的主要内容，如果未能解决你的问题，请参考以下文章
如何在 NextJs 中为 Material UI 的媒体查询实现 s-s-r？
Apollo 中 NextJs s-s-r 和 cookie 的问题
如何在 NextJS s-s-r 中存储和获取 access_token