Search code examples
cssmedia-queries

css media query max-device-width

If I have css 3 media query for max-device-width does this change when the orientation of the device changes?

For example if an iPhone goes from portrait to landscape does the max-device-width change?

Solution

  • This differs from iPhone, iPad etc to other devices. With Apple products, the device-width values remain the same, but with other devices changing the orientation could cause alternative rules to apply.

    The most reliable way to do this is to use min/max-width instead of min/max-device-width. These are dependent on the size of the viewport, and are consistent across devices.