Difference between width and device-width in CSS media queries

What is the difference (in simple terms) between height and width and device开发者_如何转开发-width and device-height?

device-width is the...

width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

Source.

The width...

describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer)

Source.

More than a late answer Hopes it will help Some one

In CSS media the difference between width and device-width can be a bit muddled, so lets expound on that a bit. device-width refers to the width of the device itself, in other words, the screen resolution of the device. Lets say your screen's resolution is 1440 x 900. This means the screen is 1440 pixels across, so it has a device-width of 1440px. Most mobile phones have a device-width of 480px or lower, including the popular iPhone 4 (with device-width: 320px), despite it technically having a 640 x 960 resolution. This is due to iPhone 4's retina display, which crams two device pixels into each CSS pixel on the screen. This is true for the Ipad 3 as well; its reported device-width is 768px just like its predecessors, even though its actual screen resolution is 1536px x 2048px. In general width is more versatile when it comes to creating responsive webpages, though device-width is useful when you wish to specifically target mobile devices (and not desktops with a small browser window for example)

as from developer.mozilla.org ,

width :
Value: Media: visual, tactile
Accepts min/max prefixes: yes

The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).

Note: As the user resizes the window browser switches style sheets as appropriate based on media queries using the width and height media features. !!!

i found this article very interestingly from javascriptkit : http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

If you define device-width means your particular css is call when you open your page in iphone, ipad ,ipod & mobile device . for example :

@media only screen and (max-device-width:480px){
        body{
          color:red;
        }
    }

or if you define width which means your particular css is call when your window is resize . for example :

@media only screen and (min-width: 481px) and (max-width: 1024px) {
        body{
         color:yellow;
        }
    } 

for more info please check http://webdesignerwall.com/tutorials/css3-media-queries , http://x7.fi/2010/02/12/how-to-fit-your-website-for-the-apple-ipad/

If you are making a cross-platform app (eg. using phonegap/cordova) then,

Don't use device-width or device-height. Rather use width or height in CSS media queries because Android device will give problems in device-width or device-height. For iOS it works fine. Only android devices doesn't support device-width/device-height.

The device-width describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

Whereas the height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.

Source: https://developer.mozilla.org/en/CSS/

For more on media queries, see: http://www.w3.org/TR/css3-mediaqueries/