否定式CSS媒体查询在移动端Safari不生效问题求助

原因 #

不是你的否定写法有误，是移动端Safari对not结合display-mode的媒体查询支持存在兼容性问题，导致带否定逻辑的查询无法正常生效。

替代改写方案 #

可以调整逻辑，避开not运算符，通过「默认状态+优先级覆盖」的方式实现需求，确保在所有目标浏览器中生效：

/* 初始状态：隐藏所有元素 */
.standalone-large, .standalone-small, .browser-large, .browser-small {
    display: none;
}

/* 浏览器环境下，显示对应尺寸的元素 */
@media (max-width: 799px) {
    .browser-small {
        display: inline;
    }
}
@media (min-width: 800px) {
    .browser-large {
        display: inline;
    }
}

/* 独立应用模式下，覆盖显示对应尺寸的standalone元素 */
@media (display-mode: standalone) and (max-width: 799px) {
    .browser-small {
        display: none;
        .standalone-small {
            display: inline;
        }
    }
}
@media (display-mode: standalone) and (min-width: 800px) {
    .browser-large {
        display: none;
        .standalone-large {
            display: inline;
        }
    }
}

这种写法完全规避了not运算符，利用媒体查询的优先级覆盖特性，既保持了原有的逻辑，又能在移动端Safari中正常工作。

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