Newest method to detect small screen

Question

While waiting for responsive design to find the way into a legacy web site, I would like to redirect a browser to a mobile version if the screen is smaller than 480px

Hunting around I came up with

var isSmall = window.matchMedia ? 
              window.matchMedia("screen and (max-width: 480px)") : 
              screen.width<=480;

Question

Is this acceptable in 2014 or is there a better/safer/newer method to do what I want without using useragent sniffing?

References

• MDN Window.matchMedia

• JavaScriptKit CSS media query matching in JavaScript using window.matchMedia()

• QuirksMode screen.width is useless (hence the addition of matchMedia)

Answer 1

You could use a polyfill such as https://github.com/paulirish/matchMedia.js/

Answer 2

you can use bootstrap http://getbootstrap.com/ or
foundation http://foundation.zurb.com/
these two frameworks has a powerful multi device layouts.

Answer 3

Yes there is lot of tricky ways :) to choose windows width but our Team's view you didn't have to include any tricks to know just windows.width because jQuery has a .width() function like:

var window_width = $(window).width();
if( window_width <= 480 ){
  console.log(window_width);
}

Iphone 4S, Iphone 5, Iphone 5S Every one's Screen Width is 320px. Your Mobile Resolution isn't your mobile's Screen Width. so when you include your tricks to know just windows width or something you just increase your Application's loadspeed this gonna be a problem for your user. But you know that was the designer's issue why they complicate the designs for developers & for End Users. :)