检测小屏幕的最新方法

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这将是你的用户的问题。 但是你知道这就是设计师的问题，为什么它们使开发人员和最终用户的设计复杂化。 :)