未应用 Safari 响应式设计模式 CSS 媒体查询“设备" [英] Safari Responsive Design Mode CSS media query 'device' not applied

问题描述

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

I have been using the Safari Responsive Design Mode while developing and debugging a responsive Website I am working on.

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

When setting to any mobile device (e.g. any iPhone or iPad), I was expecting a media query like this

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

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

to fire and style elements with the disappear-on-device class and on devices with width <= 480 accordingly, since the RDM can be specifically set to emulate an iPhones and iPads.

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

The styling is, however, not happening. Chrome responsive design mode seems to be handling this just fine. I have not been able to find anything related in the Safari preferences.

我在这里遗漏了什么吗?有没有办法让 Safari RDM 像真正的设备一样工作?

Am I missing something here? Is there a way to make Safari RDM act like an actual device?

推荐答案

device-width，连同它的兄弟，min-device-width 和 max-device width 已被弃用并从标准中删除.

device-width, along with its siblings, min-device-width and max-device width have been deprecated and removed from the standards.

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

You should just use width, min-width, and max-width, which are calculated based on the size of the viewport. On most mobile devices, width, min-width, and max-width end up yielding the same net result as device-width, min-device-width, and max-device-width.

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

Here's information on the deprecation of device-width. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width

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

Here's the new spec, which no longer includes device-width. https://www.w3.org/TR/mediaqueries-4/#width

这篇关于未应用 Safari 响应式设计模式 CSS 媒体查询“设备"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！