This page is In Progress

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.



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

On all mobile browsers, the device-width media query uses the value of screen.width. Originally, that property held the width of the screen in device pixels, but on an increasing number of mobile browser it instead holds the width of the ideal viewport (the one that you get when you use the meta viewport tag). Unfortunately it’s impossible to tell which value is returned without resorting to a browser detect.

Since screen.width and the device-width media query are unreliable on mobile browsers they should not be used for responsive design purposes. Use width instead.


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



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


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.

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

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

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

Related specifications

Media Queries Level 4
Working Draft
Media Queries