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.
max-width
refers to the width of the viewport and can be used to target specific sizes or orientations in conjunction with max-height
. Using multiple max-width
(or min-width
) conditions you could change the page styling as the browser is resized or the orientation changes on a device like an iPhone.
max-device-width
refers to the viewport size of the device regardless of orientation, current scale or resizing. This will not change on a device so cannot be used to switch style sheets or CSS directives as the screen is rotated or resized.