Width Vs Device-Width Media Query

The device-width media query measures the width of the device in device pixels.

The width media query measures the total width of the page in CSS pixels.

In general from CSS point of view Width stand for CSS Pixel width of device i.e. resolution of device/ CSS PixelDensity

Device Width and Screen Orientation

iPhone and iPad devices, the device-width always corresponds to the width of the device in portrait mode (ie: 768px), regardless of whether the device is in that mode or landscape instead. With other devices, its device-width changes depending on its orientation.

Do not lie View Port meta tag fix for Mobile

By default mobile devices report there physical width (based on resolution) as screen width that is usually higher in case of HDPI devices like IPhone Retina display.

This was originally added as feature so that desktop devices can be rendered on mobile screen in very zoomed in mode.

For responsive mobile websites we usually add a view port meta tag fix that forces devices to report view port size in terms of physical devices width and height not the logical that is usually resolution as default. EX <meta name="viewport" content="width=device-width, initial-scale=1">