Nowsze metody wykrywania małym ekranie

Question

Czekając na elastyczne projektowanie znaleźć drogę do miejsca Legacy internetowej, chciałbym przekierować przeglądarkę do wersji mobilnej, jeśli ekran jest mniejszy niż 480px

Polowanie wokół Przyszedłem z

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

Pytanie

jest to dopuszczalne w 2014 czy istnieje lepsze/bezpieczniejsze/nowszy sposób robić to, co chcę bez użycia userAgent Sniffing?

Odniesienia

• MDN Window.matchMedia

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

• QuirksMode screen.width is useless (stąd Dodanie matchMedia)

Answer 1

Można użyć PolyFill takiego jak https://github.com/paulirish/matchMedia.js/

Answer 2

można użyć Bootstrap http://getbootstrap.com/ lub
Fundacja http://foundation.zurb.com/
tych dwóch ram ma potężne układy wielo urządzenia.

Answer 3

Tak, jest tam wiele trudnych dróg do wyboru :) szerokość okna, ale widok z naszego zespołu nie trzeba zawierać żadnych sztuczek, aby wiedzieć, windows.width ponieważ jQuery posiada funkcję .width() takich jak:

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

Iphone 4S, Iphone 5, iPhone 5S każdy za Szerokość ekranu to 320px. Rozdzielczość dla urządzeń mobilnych nie jest szerokością ekranu telefonu komórkowego. więc jeśli uwzględnisz swoje sztuczki, aby poznać szerokość okna lub coś, co tylko zwiększy prędkość ładowania aplikacji, będzie to problemem dla Twojego użytkownika. Ale wiesz, że to był problem projektanta, dlaczego komplikują projekty dla programistów & dla użytkowników końcowych. :)