1

If I'm understanding this correctly, screen.width is the JavaScript analogue of

device-width

in a CSS media query.

What would be correct JavaScript for max-device-width and min-device-width?

  • [Get the device width in javascript](http://stackoverflow.com/questions/6850164/get-the-device-width-in-javascript) – Flowen May 15 '13 at 13:51
  • Actually, @Flowen, I am not asking about device-width – I know how that is done, as I indicated in the body of the question. I am asking specifically about max-device-width and min-device-width. Would appreciate your input. –  May 15 '13 at 13:54

1 Answers1

0

The CSS max-device-width and min-device-width operators are predicates, so in JavaScript they would be checked with relational operators:

if (screen.width >= 100)  // (min-device-width: 100)

if (screen.width <= 1000) // (max-device-width: 1000)
Pointy
  • 405,095
  • 59
  • 585
  • 614
  • This would be the most obvious answer, but somehow this doesn't seem to be a working solution for iPad and iPhone, @Pointy. It appears that only one value (the lowest) of the screen.width of these devices is read by JavaScript. Could you suggest, how this can be solved? –  May 15 '13 at 13:57
  • On iPad and iPhone, the screen width and the window width are the same. You can't make the browser window consume less of the screen than all of it (except perhaps if you're controlling the WebView container, and I don't even know that that's possible). – Pointy May 15 '13 at 13:59
  • @Astoria also note that the browser (via CSS or JavaScript) reports the screen width in *virtual* pixels that may not correspond to the actual physical pixel geometry. Thus, phones with 1280x720 physical pixels look like 640x360 in the browser, and there's no way around that. – Pointy May 15 '13 at 14:01
  • That's exactly why I'm looking for the max-device-width and min-device-width, @Pointy – since those two values are reported in actual pixels. For example, iPhone 4 is 640x960, but its max-device-width value is 320x480. Would appreciate more input from you! –  May 15 '13 at 14:06
  • @Astoria well the problem is that the iPhone simply will not give the browser direct access to the numbers 640 or 960; it insists that 320x480 is the actual size. [Maybe this SO question can help.](http://stackoverflow.com/questions/5063489/how-can-you-get-the-css-pixel-device-pixel-ratio) – Pointy May 15 '13 at 15:08
  • That's perfectly fine, @Pointy, 320 and 480 would work even better, as long as I can actually get those numbers, but HOW can I get them with JavaScript?! –  May 15 '13 at 15:45
  • Well what are the values of `screen.width` and `screen.height`? – Pointy May 15 '13 at 15:47
  • Actually, @Pointy, since you clearly know very well what you're talking about, perhaps this subject deserves a bit of clarification on my part. Should I write a separate question, or can we talk about it in a chat room? –  May 15 '13 at 15:48
  • Well it looks like your rep's too low for the SO chat - maybe clarify with another question. – Pointy May 15 '13 at 15:49
  • Right. Hang on, @Pointy, let me prepare the question, and then I'll place the link to it in the next comment. –  May 15 '13 at 15:50
  • Ok, question is ready – @Pointy, could you please take a look: http://stackoverflow.com/questions/16565782/script-for-assigning-viewport-meta-parameters-iphone-ipad-conundrum –  May 15 '13 at 16:03