What is the difference between max-device-width and max-width for mobile web?

max-width is the width of the target display area, e.g. the browser

max-device-width is the width of the device’s entire rendering area, i.e. the actual device screen

Same goes for max-height and max-device-height naturally.