0

I'm trying to debug media queries with Chrome Developer Tools by editing the @media line in style panel. But this is too labour intensive.

What I'm looking for is:

  • width/device-width in pixels/millimeters/other units
  • font size in millimeters

Is there a way to run a jQuery command or some other tool to get these values?

Any search on debugging media queries finds suggestions on one particular page or handycraft debugging (edit this, see that, etc.), or trivial stuff like $('body').width().

TylerH
  • 20,799
  • 66
  • 75
  • 101
culebrón
  • 34,265
  • 20
  • 72
  • 110
  • Can you give an example of the info you're trying to find, exactly? It's unclear what you mean. – TylerH Aug 27 '15 at 22:48
  • @TylerH Edited it a bit – culebrón Aug 27 '15 at 22:52
  • This doesn't exactly answer your question, but Firefox has a neat [responsive design mode](https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View) (Ctrl-Shift-M) which tells you your exact viewport dimensions and lets your resize either by mouse or by keyboard. I've found it amazingly useful for working with media query breakpoints. – Jeremy Aug 27 '15 at 22:57
  • @Jeremy yes, I used the same in Chrome, but still the cycle is a bit dragging: edit > refresh > drag > think what the value might be > edit. – culebrón Aug 27 '15 at 23:06
  • @culebrón fair enough; you can edit the breakpoint in Firefox's style-sheet editor (but not the DOM inspector) which could cut out some refresh cycles, I guess. Probably works the same in Chrome. – Jeremy Aug 27 '15 at 23:56

1 Answers1

-1

You can always get the width and height (with JavaScript) from the body and calculate with these pixel values.

Like (jQuery ): 

var screenWidth = $('body').width();

Here is a demo, this might help you. http://codepen.io/gabrieleromanato/pen/CuviB

And a similar entry i think: How can you get the CSS pixel / device pixel ratio?

Community
  • 1
  • 1
Webworx23
  • 121
  • 2
  • 9
  • I don't need width and height, it's too trivial to ask a question here. – culebrón Aug 27 '15 at 22:39
  • And what is with the demo? – Webworx23 Aug 27 '15 at 22:41
  • That seems to have assumed that the physical size of a pixel will *always be the same* and has hardcoded that ratio into the code … since the question is about determining what the ratio is for whatever device runs the code, it seems to be remarkably unhelpful. – Quentin Aug 27 '15 at 22:44
  • `millimeters.width = Math.floor(width * 0.264583);` From W3C docs, pixels don't convert into milimeters this straight way. They are device-dependent, not constants. – culebrón Aug 27 '15 at 22:45
  • Thats true. I wouldnt recommend to use this for all devices too. But in certain situations where you dont need to get it working on every device, its enough. @culebrón – Webworx23 Aug 27 '15 at 22:49
  • @Webworx23 that's exactly what I'm trying to do. There are thousands of mobile phones with different screen sizes. I'm trying to at least see what values I have and when a query starts working. – culebrón Aug 27 '15 at 22:52
  • 1
    And here you find a big list of devices, maybe also usefull. http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html. So thats it from my side. – Webworx23 Aug 27 '15 at 22:59
  • Thanks! Surprizingly, none of my test phones are on the list. :) e.g. Samsung Galaxy G530H, LG P698. – culebrón Aug 27 '15 at 23:04