Question

i have a sepcific question related to using CSS Media Queries.
Like when we say device-width for the iPad, I think it always returns 768px (both orientations)
But on desktop browsers, what exactly is the value returned for device-width ?
Is it different from what “width” would return in the Media Query for desktop?

Answer 1

The spec allows you to access both:

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

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

width: 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).

So device-width is the width of the display hardware, be it the phone itself or the desktop monitor. Obviously, not that useful in a desktop situation given that the screen size has little bearing on the browser viewport size.