Question

在等待响应式设计进入旧网站的过程中，如果屏幕小于480px，我想将浏览器重定向到移动版本

狩猎我想出了

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

问题

这在2014年是否可以接受，或者是否有更好/更安全/更新的方法来做我想做的事情而不使用嗜好嗅探？

参考

MDN Window.matchMedia
JavaScriptKit CSS media query matching in JavaScript using window.matchMedia()
QuirksMode screen.width is useless（因此添加了matchMedia）

Answer 1

您可以使用填充程序，例如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 < / strong>每个人屏幕宽度 320px 。您的移动分辨率不是您的移动设备的屏幕宽度。因此，当你包含你的技巧只知道窗口宽度或其他东西，你只是增加你的应用程序的loadpeed这将是你的用户的问题。但是你知道这就是设计师的问题，为什么它们会让开发人员的设计复杂化。对于最终用户。：）

检测小屏幕的最新方法

3 个答案: