How To Detect Screen Size For Responsive Web Design?

I googled this and got a quirksmode site that gives you your screen size. Pulling up the console I see that screen.width and screen.height are directly available from the window o

Solution 1:

Take a look at Get the device width in javascript

Media Queries work in js too:

if (window.matchMedia('screen and (max-width: 768px)').matches) {}

Another way would be:

var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

Solution 2:

This is what worked for me after long hunch. These attributes below provide responsive sizes based on new tab size.

window.innerWidthwindow.innerHeight