CSS媒体查询实现仅移动设备显示内容失效，求技术解决方案

嘿，我来帮你排查这个媒体查询的问题！你想要让.mobileShow内容仅在手机和平板上显示，但现有代码只覆盖了320px-480px的窄屏设备，这大概率是核心问题——很多平板的宽度远大于480px，所以没被匹配到。另外还有几个容易忽略的细节，我一步步给你拆解：

1. 先确认viewport元标签是否存在 #

这是移动端媒体查询生效的前提条件！如果你的HTML头部没加这个标签，移动浏览器会默认用桌面端的视口宽度渲染页面，直接导致媒体查询无法触发。一定要把它放在<head>标签内：

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

2. 扩展媒体查询的设备覆盖范围 #

你的现有代码只适配了小屏手机，要包含平板的话，需要把最大宽度阈值调大。这里更推荐用max-width代替max-device-width——它匹配的是浏览器视口宽度，比设备物理宽度更灵活（比如用户在平板上缩放浏览器时也能正常触发）：

.mobileShow {
  display: none;
}

/* 匹配手机+平板竖屏（大部分平板竖屏宽度≤768px） */
@media only screen and (max-width: 768px) {
  .mobileShow {
    display: inline;
  }
}

/* 如果需要覆盖平板横屏，把最大宽度调整到1024px */
@media only screen and (max-width: 1024px) {
  .mobileShow {
    display: inline;
  }
}

3. 检查CSS优先级冲突 #

如果调整后还是不生效，打开浏览器开发者工具看看元素样式：有没有其他规则（比如带!important的样式、更具体的选择器如#container .mobileShow）覆盖了.mobileShow的display属性？如果有，要么提升当前选择器的优先级，要么修改冲突规则。

额外小提示 #

如果想更精准区分设备类型，也可以结合orientation属性，但你的需求是手机和平板都显示，所以直接扩大宽度范围就足够啦。

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