檢測小屏幕的最新方法

Question

在等待響應式設計進入遺留網站的過程中，如果屏幕小於480px，我想將瀏覽器重定向到移動版本

狩獵我想出來了

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

題

這在2014年是否可以接受，或者是否有更好/更安全/更新的方法來做我想要的而不使用useragent嗅探？

參考

• MDN Window.matchMedia

• 使用window.matchMedia（）在JavaScript中使用JavaScriptKit CSS媒體查詢進行匹配

• QuirksMode screen.width沒用 （因此添加了matchMedia）

Answer 1

您可以使用polyfill，例如https://github.com/paulirish/matchMedia.js/

Answer 2

你可以使用bootstrap http://getbootstrap.com/或
基金會http://foundation.zurb.com/
這兩個框架具有強大的多設備布局。

Answer 3

是的，有很多棘手的方法:)選擇窗口寬度但我們的團隊的視圖你不必包含任何技巧只知道windows.width因為jQuery有一個.width（）函數，如：

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

Iphone 4S ， Iphone 5 ， Iphone 5S每個人的屏幕寬度是320px 。 您的移動分辨率不是手機的屏幕寬度。 因此，當你包含你的技巧只知道窗口寬度或其他東西你只是增加你的應用程序的loadpeed這將是你的用戶的問題。 但是你知道這就是設計師的問題，為什么它們使開發人員和最終用戶的設計復雜化。 :)