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/zh-美国/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屋！