相同CSS为何在移动端与窄屏桌面显示效果不同？该如何解决？

问题原因 #

• 未配置移动端视口（viewport）元标签：移动端浏览器默认会将页面渲染宽度设为980px（模拟桌面端页面效果），再整体缩放至设备屏幕宽度，导致CSS中设置的像素值、媒体查询规则和实际渲染效果不匹配，这是同一份CSS在两个端显示差异的核心原因。
• 媒体查询规则匹配范围不合理：你使用的@media screen and (max-width: 520px)会匹配所有视口宽度小于520px的设备，包含了手动拉窄的桌面浏览器窗口和小屏移动端，你在该规则下写的样式只适配了移动端场景，自然会导致桌面窄屏显示异常。

修复方案 #

• 第一步：在HTML的<head>标签中添加视口配置，统一两端的渲染基准：

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

该配置会让移动端的渲染视口宽度等于设备物理宽度，不会默认缩放页面，保证CSS像素和两端的渲染逻辑对齐。

• 第二步：调整媒体查询规则，避免误伤桌面窄屏：
  如果你的媒体查询样式仅需要在移动端生效，可以增加hover能力判断来区分桌面和移动端，桌面端设备无论窗口多小都默认支持hover，移动端绝大多数设备不支持hover：

@media screen and (max-width: 520px) and (hover: none) {
  /* 仅移动端小屏生效的样式 */
}

如果你的需求是同时适配桌面窄窗口和移动端，直接调整媒体查询内的样式逻辑，兼容两种场景即可，推荐使用vw、rem等相对单位替代固定像素，适配不同宽度的设备。

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