Safari响应式设计模式未应用CSS媒体查询"设备"

Question

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

当设置到任何移动设备(例如任何iPhone或iPad)时,我期待像这样的媒体查询

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

disappear-on-device因此,可以将RDM专门设置为模拟iPhone和iPad ,从而使用类和相应宽度<= 480的设备触发和设置元素.

然而,造型并没有发生.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