HTML+CSS页面PC端响应正常，移动端显示异常求快速解决

• 缺少视口元标签：手机浏览器默认会以桌面端宽度（通常980px）渲染页面再缩放显示，导致针对移动端的媒体查询无法触发。这就是为什么PC端缩窗口能正常响应，但手机端完全不生效的核心原因之一。
• 移动端媒体查询被误删/覆盖：你修改代码时可能删掉了模板里针对小屏幕的@media规则，或者自己添加的PC端footer样式优先级高于原有移动端样式，导致移动端样式无法生效。
• CSS选择器冲突：定制代码时写的选择器和模板原有移动端选择器重复，PC端样式因加载顺序或优先级更高，直接覆盖了移动端样式。

1. 补全视口元标签：打开HTML的<head>部分，添加这行代码（如果已经存在，检查content参数是否正确，不要设置固定宽度）：

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

这是让手机浏览器正确识别设备宽度、触发媒体查询的基础。

2. 快速恢复/添加移动端footer样式：
   • 查找模板中原有的移动端媒体查询（一般是@media (max-width: 768px)或类似区间），检查里面的footer样式是否被误删，直接恢复那段代码即可。
   • 如果找不到原有代码，直接在CSS文件末尾添加一段强制覆盖的移动端样式（用!important是最快的临时解决方式，适合快速修复）：

@media (max-width: 768px) {
  /* 替换成你需要的移动端footer样式，示例如下 */
  .footer {
    width: 100% !important;
    padding: 1rem 0 !important;
    flex-direction: column !important;
    text-align: center !important;
  }
}

3. 用开发者工具快速定位问题：在PC端打开Chrome按F12调出开发者工具，点击左上角的手机图标切换到设备模拟模式，选择对应手机型号，查看footer的CSS属性，找到正在生效的PC端样式，直接在媒体查询里覆盖这些属性即可。

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