CSS媒体查询移动端失效但桌面端正常的问题求助

我用emotion.js的styled组件开发响应式网页，Chrome桌面模拟器显示正常，但移动端网页调试器里CSS媒体查询完全不生效。试过Stack Overflow上的相关方案都没用，viewport元标签试过两种配置：

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

还有

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

结果都一样。网站部署在GitHub Pages，相关代码如下：

index.js #

import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>,
);

App.js #

function App() {
    return (
        <Routes>
            <Route
                path="/"
                element={
                    <div className="App">
                        <Home />
                        <AnimatedCursor color="0,198,171" innerSize={20} outerSize={20} />
                    </div>
                }
            />
        </Routes>
    );
}

Home.jsx #

import Intro from './Intro';
import Outro from './Outro';
import Profile from './Profile';
import TechStack from './TechStack';

const Home = () => {
    return (
        <>
            <Intro />
            <Profile />
            <TechStack />
            <Outro />
        </>
    );
};

export default Home;

Cover.jsx #

const Cover = styled.div`
    font-family: Cover;
    font-size: 8vw;
    text-align: center;
    color: #005b96;
    @media (${devices.mobileL}) {
        font-size: 50px;
    }
`;

• 检查devices.mobileL的定义：这是最可能出问题的地方，必须确保变量是合法的媒体查询字符串，不带多余引号。比如正确定义应该是：

  const devices = {
    mobileL: 'max-width: 425px'
  };
  

  如果你的定义里带了引号（比如'(max-width: 425px)'），emotion编译后会生成无效的CSS，媒体查询自然不生效。

• 查看emotion编译后的CSS：打开移动端调试器的Elements面板，找到Cover组件对应的style标签，检查媒体查询的编译结果。如果语法错误（比如多了引号、括号不匹配），直接修正变量定义即可。

• 排查CSS优先级冲突：有时候媒体查询的样式会被更高权重的样式覆盖。在调试器的Computed面板查看元素的font-size，看是否有其他样式（比如带!important的全局样式、更具体的选择器）把媒体查询的样式覆盖了。

• 确认调试器视口尺寸：确保你选择的移动端调试器视口宽度符合mobileL的定义（比如425px），手动拖动调试器的视口边界，缩小到阈值以下，看样式是否变化。

• 清除GitHub Pages缓存：部署后浏览器可能缓存了旧代码，在调试器Network面板勾选「Disable cache」，刷新页面后再测试。

内容的提问来源于stack exchange，提问作者saltvine