OnePlus手机段落样式代码@media媒体查询不生效问题求助

数据老陈

2026-10-6

排查步骤

首先确认页面<head>中已正确配置viewport元标签，绝大多数移动端媒体查询失效都是遗漏该配置导致的：
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
未配置该标签时，安卓设备默认会使用980px宽度的虚拟视口渲染页面，自然无法触发max-width:479px的匹配规则。
检查CSS样式顺序：你当前的媒体查询代码必须写在全局.pinfo默认样式的后面，CSS的层叠规则会默认优先应用后声明的同优先级样式，如果媒体查询写在默认样式前面，会被后面的默认规则覆盖。
确认选择器优先级：如果存在其他优先级高于.pinfo的选择器（比如ID选择器、嵌套层级更高的类选择器、带!important标记的规则）修改了对应属性，也会导致媒体查询规则失效。可以通过Chrome远程调试功能连接一加手机，查看对应元素的样式面板，确认媒体查询规则是否被覆盖。

优化媒体查询兼容写法：部分高版本安卓Webkit内核对-webkit-min-device-pixel-ratio的兼容存在波动，建议补充标准的分辨率查询规则，同时确认你的目标一加机型的设备像素比是否真的≥2.625：

@media only screen and (max-width:479px), 
only screen and (-webkit-min-device-pixel-ratio: 2.625),
only screen and (min-resolution: 2.625dppx) {
    .pinfo {
        color:#333333;
        line-height:98%;
        text-align:left;
        font-size:16px;
    }
}