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

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