CODEWITHSUNDEEP
javascriptcssresponsive-designmedia-queries
Jake Wilson
Jake Wilson

Reputation: 91233

Is max-device-width referring to document.body.clientWidth?

In media queries, I've seen max-width, min-width, max-device-width and min-device-width and orientation.

From a JavaScript standpoint, are these referring to document.body.clientWidth? Or window.outerWidth ? Also I see there is document.body.offsetWidth.

Is there a resource out there that list out all the valid css media query parameters along with what JavaScript attributes that match up with them?

Upvotes: 11

Views: 5709

Answers (2)

Giona
Giona

Reputation: 21114

So, you want a list of all the valid css media query parameters equivalent in JavaScript.

Let's try to do it, relying on the media queries W3C specification.

Media types

It doesn't seem to be possible to retrieve the media type (screen, print, etc) directly with a JavaScript property/method, so you must rely on workarounds, scripts or plugins.

I've found:

  1. matchMedia polyfill seems the best solution (used by Modernizr and Respond.js too)
  2. CSS media detection script (seems oldish)
  3. jMediaType (still relies on css)

Media Features (directly detectable)

1. width

window.innerWidth / document.body.clientWidth / document.documentElement.clientWidth (see below)

2. height

window.innerHeight / document.body.clientHeight / document.documentElement.clientHeight (see below)

3. device-width

screen.width

4. device-height

screen.height

5. orientation

window.orientation (see below)

6. color

screen.colorDepth

7. resolution

screen.pixelDepth / window.devicePixelRatio (see below)

Media Features (detected indirectly)

1. width / height

Given the differences between browsers, you need a function to get width and height. Some time ago i found this snippet (can't remember where) that works cross-browser:

var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0];

var width = w.innerWidth||e.clientWidth||g.clientWidth;

var height = w.innerHeight||e.clientHeight||g.clientHeight;

2. aspect-ratio

the ratio of the value of the ‘width’ media feature to the value of the ‘height’ media feature

width / height (see above)

3. device-aspect-ratio

the ratio of the value of the ‘device-width’ to the value of the ‘device-height’

screen.width / screen.height

4. resolution

the density of the pixels of the output device. The ‘dpi’ and ‘dpcm’ units describe the resolution of an output device, i.e., the density of device pixels.

So it's not the screen size (width x height) as many think!

var resolution = window.devicePixelRatio||screen.pixelDepth||screen.colorDepth;

screen.pixelDepth is for Firefox only, and you can find window.devicePixelRatio compatibility on quirksmode.org.

Here i read that screen.colorDepth is ok as a fallback.

5. monochrome

the number of bits per pixel in a monochrome frame buffer. If the device is not a monochrome device, the output device value will be 0

if ( screen.colorDepth == 2) {
    var monochrome = /* retrieve resolution here, see above */;
}else{
    var monochrome = 0;
}

6. orientation

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’.

if ( width > height ) {
    var orientation = 'landscape';
}else{
    var orientation  = 'potrait';
}

The window.orientation property is not supported by all browsers, and it returns a numeric value, so it's not directly related to orientation as intended by W3C. Check this answer on SO for more information.

Media Features (undetectable)

I couldn't find a way to detect the following media features with JavaScript (and i don't think it's possible):

  • color-index
  • scan
  • grid

More intresting stuff

  • screen.availHeight = height of the screen minus interface features (such as the taskbar)
  • screen.availWidth = width of the screen minus interface features (such as the taskbar)
  • To emulate media queries with JavaScript there's Modernizr's mq() method, but be aware: if a browser doesn't support media queries it won't execute the code at all will always return false.

Sources

  1. width/height : http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
  2. device-width/height : http://responsejs.com/labs/dimensions/
  3. orientation : Detect rotation of Android phone in the browser with JavaScript
  4. resolution and color related stuff : http://www.javascriptkit.com/howto/newtech3.shtml
  5. monochrome : Javascript: detect monochrome display
  6. pixel ratio : http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html

Upvotes: 13

Chuck Kollars
Chuck Kollars

Reputation: 2175

The min-width: and max-width: queries refer to the logical window (whose size varies as the user changes the size of the browser's window), while the min-device-width: and max-device-width (and orientation:) queries refer to the physical screen/viewport (whose size does not change once the "meta...viewport..." statement has fixed it).

Depending on what your goal and audience are, you might find an alternative approach better suited than Media Queries. You may find it helpful to peruse http://www.ckollars.org/alternative-to-media-queries.html

Upvotes: 0

Related Questions