Detect Screen Width with CSS Media Queries

Detect screen width with CSS Media Queries

You can use device-width which will test of the screen's width in px. That however is not entirely recommended. Use max-width and min-width (for the viewport) instead.

---

If you are trying to GET the screen width and use it (something like content: (device-width); of some sort, that's not possible. Stick with JavaScript.

Manual Reference

How can I detect which window dimension is bigger just using CSS media query?

You can use an orientation media query:

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

From the W3C media Queries spec:

The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.

But note that it usually make more sense to worry about the actual width than the orientation, see this article on QuirksBlog for details.

Media query about screen size instead of resolution

Well, for starters, the CSS pixel is an angular measurement and is decently normalized between devices. Not entirely, but enough so for this to be a non-issue in most cases.

Personally I measure media queries in ems so that they're relative to my font size. I mean, people usually visit a web site to read the text found on the website, so as long as there's a reasonable amount of words per line I'm satisfied.

You really shouldn't measure with physical (device) widths because people may have UI elements taking up space (or simply not run their browsers in full screen).

Media query to detect a small (in inch) but high-width (in pixels) screen

Use resolution in your media query to distinguish between devices of different pixel densities.

For instance to tend to a 288 dpi device where one logical pixel is three hardware pixels, use one of these

@media screen and (min-resolution: 3dppx) { ... }
@media screen and (min-resolution: 288dpi) { ... }

where dppx means dots per pixel, and dpi, of course, dots per inch.

See W3C or MDN.

CSS media query to detect width double the height?

See the min-aspect-ratio and max-aspect-ratio CSS media queries:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

You can then use CSS to specify a different image (as a background image) based on the aspect ratio.

/* regular, default image */
#myImage {background-image: url(...)}

/* image to use when screen width is more than double the height */
@media screen and (min-aspect-ratio: 2/1) {
    #myImage {background-image: url(...)}
}

What is the media query for large desktops?

The challenges of optimizing for large-scale displays center around how to scale and manage content.
You need to assume screen width at certain points.

Example: for class "container"

@media screen and (min-width: 1400px) {
  .container {
    width: 1370px;
  }
}
@media screen and (min-width: 1600px) {
  .container {
    width: 1570px;
  }
}
@media screen and (min-width: 1900px) {
  .container {
    width: 1870px;
  }
}

---

Related Topics