Question

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

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

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

使用disappear-on-device类和相应宽度<= 480的设备触发和设置元素，因为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

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

1 个答案: