CSS媒体查询无法捕获384x730特定屏幕尺寸问题

1. 先检查视口配置 #

如果没正确设置viewport标签，媒体查询会基于浏览器布局视口而非设备实际视口，直接导致尺寸匹配失败。务必在HTML头部添加：

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

其中viewport-fit=cover能适配带刘海、状态栏的设备，避免系统UI占用视口高度，导致实际可用高度低于730px。

2. 优化媒体查询的精准度 #

你当前的查询用max-width:384px和max-height:730px，会命中所有宽度≤384、高度≤730的设备，而且前面的max-width:414px查询也会覆盖这个规则（因为384≤414）。改成精准匹配目标尺寸的规则，同时补充兼容非WebKit内核的设备像素比属性：

/* 精准匹配384px宽、730px高、dpr=2的设备 */
@media only screen 
  and (width: 384px) 
  and (height: 730px)
  and (-webkit-device-pixel-ratio: 2)
  and (device-pixel-ratio: 2) {
  .home-container {
    width:10% !important;
  }
  .hero-content {
    align-self: unset !important;
  }
  .hero-action {
    width: unset !important;
  }
}

如果担心设备系统UI占用高度导致实际视口不足730px，可以调整为范围匹配：

@media only screen 
  and (width: 384px) 
  and (min-height: 700px)
  and (max-height: 730px)
  and (-webkit-device-pixel-ratio: 2)
  and (device-pixel-ratio: 2) {
  /* 你的样式 */
}

3. 排查样式优先级冲突 #

即使加了!important，如果有其他同样带!important的规则在后面加载，或者选择器优先级更高，你的样式还是会被覆盖。可以用浏览器开发者工具的Elements面板查看元素的计算样式，确认规则是否被应用。

4. 增强设备像素比的兼容性 #

除了WebKit前缀的属性，补充标准属性和分辨率匹配，适配更多设备：

@media only screen 
  and (width: 384px) 
  and (height: 730px)
  and (-webkit-device-pixel-ratio: 2)
  and (device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { /* 2倍dpr对应192dpi */
  /* 你的样式 */
}

内容的提问来源于stack exchange，提问作者Aina Lucien Razafindraibe