mobile - Safari Responsive Design Mode CSS media query 'device' not applied

Question

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

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;
    }
}

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.

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.

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

Answer 1

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

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.

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

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