How to detect desktop and mobile browsers width with maximum compataibility

Question

So i am running media queries and this code:

 //Check different widths as different browsers report it differently
 if ($(window).width()!==0) {
     width = $(window).width();
 }
 else if (window.innerWidth!==0) {
     width = window.innerWidth;
 }

But it now appears that these are not matching up with my media queries. That combined with certain mobile aren't liking these widths means that my styles don't always match my JS added styles.

Does anybody have a complete way to detect browser width with JavaScript or jQuery?

Answer 1

The situation is complicated you will either need a plugin that handles all the various browser idiosyncrasies for you, or you will need to do this yourself. This article was very helpful to me.