device-width

Jump to: navigation, search

device-width

This article is In Progress.



Summary

The media feature describes the actual width of the output device, such as the entire screen width or the page sheet width.


Syntax

  • device-width: <length>
  • min-device-width: <length>
  • max-device-width: <length>

Values

<length>

Value for the width of the device must be a length value and can not be negative.

Examples

The first media query describes a device that has a screen width of exactly 320 pixels.

The second example describes all screen devices with a screen width of 1024 pixels and higher. Note: The width of the browser does not matter in this case. Therefore you would have to use mediaqueries: width.

The third media query describes all devices with a screen width not wider than 1023 pixels.

CSS

@media screen and ( device-width: 320px ) { … }

@media screen and ( min-device-width: 1024px ) { … }

@media screen and ( max-device-width: 1023px ) { … }



Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?