Last active
December 13, 2015 19:28
-
-
Save brianlmoon/4962688 to your computer and use it in GitHub Desktop.
Here is a function to return you the width the browser is using for media queries. For some reason, it is a bit different in each browser.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function getWindowMediaWidth() { | |
if(!window.matchMedia){ | |
// it should be this, so return it when we can't | |
// figure it out. Of course, it does not do a lot | |
// of good if the browser does not support media | |
// queries. | |
return document.body.clientWidth; | |
} | |
// it should be one of these values starting with the | |
// first one that makes the most sense | |
var values = [ | |
document.body.clientWidth, // Chrome returns this | |
window.innerWidth, // Firefox returns this because | |
window.outerWidth, // this is the same as above on browsers with no window borders | |
screen.width // last ditch effort here | |
]; | |
for(var x = 0; x<values.length; x++){ | |
if (window.matchMedia("(min-width: " + values[x] + "px) and (max-width: " + values[x] + "px)").matches) { | |
return values[x]; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment