How can I read a browser's media features?

Question

For media queries there are a number of media features defined.

I'd like to read a browsers actual media features' values in JavaScript. How can I do this?

To be clear, I do not want to know whether some media queries match. I want to know, for example, the physical width of the screen. Something similar to this:

let width = window.getMediaValue("device-width", "cm");

http://stackoverflow.com/questions/28111826/how-to-use-media-queries-in-javascript — Daniel A. White, Jan 07 '16 at 13:16
Perhaps `window.innerWidth || screen.width` will help? However, I don't know if you can get the `physical` width of the screen in `cm`. — Antonio Manente, Jan 07 '16 at 17:12
@AxD there are a lot of media features that can be queried individually, so for example you can return device screen width using Jquery's `.width()` method [Jquery :width] (http://api.jquery.com/width/) is that what you mean? — DMSJax, Jan 07 '16 at 17:12
@Antonio Manente: There's no guarantee that either of those two DOM properties - or any other DOM property - corresponds to any media feature. I wouldn't rely on it. — BoltClock, Jan 07 '16 at 17:13
@BoltClock hence why I didn't answer. But OP, I did find this http://stackoverflow.com/questions/21680629/getting-the-physical-screen-dimensions-dpi-pixel-density-in-chrome-on-androi .. which seems to suggest a possibility — Antonio Manente, Jan 07 '16 at 17:16
@AntonioManente, DMSJax: Unfortunately, these won't work as expected as they don't return the actual physical width but only pixels. — AxD, Jan 08 '16 at 01:45

score 0 · Answer 1 · answered Mar 02 '20 at 18:37

Every device has its own dpi and the JavaScript API doesn't provide more precise information than devicePixelRatio.

The devicePixelRatio of Window interface gives you a ratio that indicates whether the rendered page should be scaled or not.

Browsers assume a devicePixelRatio of 1 means 96 dpi. I've tested in on my own 17.3" screen:

Math.sqrt(Math.pow(window.outerWidth / 96, 2) + Math.pow(window.outerHeight / 96, 2));

But it gave me 18.92 inches, which is wrong.

Then I used an online equation solver to find out the real dpi of my screen, and it's actually 105.

Indeed the result of this on my computer

Math.sqrt(Math.pow(window.outerWidth / 105, 2) + Math.pow(window.outerHeight / 105, 2));

Outputs 17.3

Here is a great resource about this topic: http://screensiz.es/ — deblocker, Mar 05 '20 at 14:18

score 0 · Answer 2 · answered Mar 05 '20 at 13:09

Media queries was introduced in CSS3, and is one of the key ingredients for responsive web design. Media queries are used to determine the width and height of a viewport to make web pages look good on all type of devices

The window.matchMedia() method returns a MediaQueryList object representing the results of the specified CSS media query string. The value of the matchMedia() method can be any of the media features of the CSS @media rule, like min-height, min-width, orientation, etc.

score 0 · Answer 3 · answered Mar 05 '20 at 13:14

You can use native navigator object to get media properties, like access to webcam, mic. for ex:-

navigator.mediaDevices.getDisplayMedia()

or also use

function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}

function getHeight() {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.documentElement.clientHeight
  );
}

console.log('Width:  ' +  getWidth() );
console.log('Height: ' + getHeight() );

also there is screen object:-

screen.availHeight

How can I read a browser's media features?

3 Answers3