4

This is a followup question to this quetsion: Get the device width in javascript.

What I'm trying to do, is get the equivalent css of @media (max-width: 600px) in JavaScript.

The accepted answer says to do the following:

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

Is that still correct? Will it work for all devices?

If it's correct, what's the point of checking (window.innerWidth > 0)?

I want to know if it still works. If you look at the last comment on the answer (with 6 upvotes) it says:

How does this have so many upvotes? var width = (window.innerWidth > 0) ? window.innerWidth : screen.width; returns 667 on iphone 6 AND 6 Plus. This solution does not work correctly.

Community
  • 1
  • 1
Horay
  • 1,388
  • 2
  • 19
  • 36
  • What do you mean by still correct ?. Is there anything you found wrong with the answer? – squiroid Jan 13 '17 at 19:39
  • 2
    @squiroid I want to know if it still works. If you look at the last comment on the answer (with 6 upvotes) it says: "How does this have so many upvotes? var width = (window.innerWidth > 0) ? window.innerWidth : screen.width; returns 667 on iphone 6 AND 6 Plus. This solution does not work correctly." – Horay Jan 13 '17 at 19:40
  • 1
    Okay but in that case you have to put this comment in your question as well. I undo my downvote. Though I don't know the answer. Hope somebody will reply the right answer. And here you go (+5) for nice question :) – squiroid Jan 13 '17 at 19:43

2 Answers2

6

You should be able to do something like this:

if (matchMedia) {
  var mq = window.matchMedia("(max-width: 600px)");
  mq.addListener(WidthChange);
  WidthChange(mq);
}

function WidthChange(mq) {
  if (mq.matches) { 
     //Window width is less than or equal to 600px
  } else { 
     //Window width is greater than 600px
  }
}
kzettlmeier
  • 73
  • 3
1

From your question it seems you are asking for the following (It is a trivial answer but I assume this is what you are asking):

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

is equivalent to: 

var width;
if (window.innerWidth > 0)
{
    width = window.innerWidth;
}
else
{
    width = screen.width;
}

or: 

var width = screen.width;
if (window.innerWidth > 0)
{
    width = window.innerWidth;
}

they all do the same thing...

from your comment below you may want the following jsFiddle:
(which shows "window.innerWidth" is what you want (size of containing element) - but some browsers don't support it - so "screen.width" becomes the fallback which may not be correct as it is the width of the whole window and not just the containing element) 

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
$('#divOutput').html('The width is:' + width + 'px <br>' +
                     'window.innerWidth = ' + window.innerWidth + 'px & <br>' +
                     'screen.width = ' + screen.width + 'px');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="divOutput"></div>

if that doesn't help maybe look at:
window.innerWidth can't work on IE7. How to fix via JS and jQuery?

Community
  • 1
  • 1
Andre Nel
  • 432
  • 2
  • 9
  • I'm asking whether `var width = (window.innerWidth > 0) ? window.innerWidth : screen.width; `still works. – Horay Jan 13 '17 at 19:57
  • updated answer above with jsFiddle and link hope it helps :) – Andre Nel Jan 13 '17 at 22:15
  • Will window.innerWidth work with mobile as well? What browsers/devices don't support `window.innerWidth`? – Horay Jan 15 '17 at 02:46
  • Older browsers don't support window.innerWidth (According to http://www.w3schools.com/jsref/prop_win_innerheight.asp - from Chrome 1.0, Edge 9.0, FireFox 1.0, Safari 3.0, Opera 9.0 there is support for it... You could also try jquery's implementation eg. $("div").innerWidth() - as jquery tries to keep cross browser support... – Andre Nel Jan 17 '17 at 07:22