未应用野生动物园响应式设计模式 CSS 媒体查询'device'

Question

我一直在使用 Safari 响应式设计模式，同时开发和调试我正在处理的响应式网站。

当设置为任何移动设备（例如任何iPhone或iPad）时，我期待这样的媒体查询

@media screen and (max-device-width: 480px) {
    .disappear-on-device {
        display: none;
    }
}

相应地在宽度为 <= 480 的设备上使用 disappear-on-device 类和设备上触发和设置元素样式，因为 RDM 可以专门设置为模拟 iPhone 和 iPad。

但是，样式并没有发生。Chrome响应式设计模式似乎可以很好地处理这个问题。我无法在Safari首选项中找到任何相关内容。

我在这里错过了什么吗？有没有办法让Safari RDM像实际设备一样工作？

Answer 1

device-width及其

兄弟姐妹、min-device-width和max-device width已被弃用并从标准中删除。

你应该只使用 width 、 min-width 和 max-width ，它们是根据视口的大小计算的。在大多数移动设备上，width、min-width和max-width最终会产生与device-width、min-device-width和max-device-width相同的最终结果。

以下是有关弃用device-width的信息。https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width

这是新规范，不再包括device-width。https://www.w3.org/TR/mediaqueries-4/#width