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.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
21
Yes
?
Unknown
9.0
Yes
9
Yes
4
Yes
grid
?
Unknown
?
none
?
Unknown
?
Unknown
?
Unknown
resolution
29
Yes
?
Unknown
?
Unknown
?
Unknown
?
Unknown
scan
?
Unknown
?
none
?
Unknown
?
Unknown
?
Unknown

Mobile

FeaturesAndroidFirefox MobileIE MobileOpera MobileSafari Mobile
Basic support
?
Yes
?
Yes
?
Unknown
?
Yes
?
Yes

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 ) { … }