javascript - 如何区分移动设备和大屏幕设备？

Question

我正在构建一个 Web 应用程序，我有两组流体布局，一组用于小屏幕设备，另一组用于大屏幕。？那么我怎样才能把我的基准放在这两个类别之间呢？我知道如何在 js 中放置不同的 css 媒体查询和设备检测技术。

但我想要一个通用标准来区分这两个类别

例如:我有

var deviceIs = {
    android : agent.match(/Android/i),  
    iPhone  : agent.match(/iPhone/i),
    iPad    : agent.match(/iPad/i),
    iPod    : agent.match(/iPod/i),
    BB      : agent.match(/BlackBerry/i),
    webOS   : agent.match(/webOS/i)
};

var currentRES = {
    width : screen.width,
    height : screen.height
}

但是我想创建一个像

这样的对象

var screenTypeis ={

       smallScreen : function(){     
         if(i want this generalized condition){
                 return true;    
           }
          else{    
           return false;
          }    
}

例如 potrait 上的设备宽度 > 480 和 < 480 && 等等......

Answer 1

谁说什么是小屏幕，什么不是？

例如，新 iPad 的尺寸相当小(与普通屏幕相比)，但分辨率却比高清标准高出一百万像素。

就我个人而言，我会选择 CSS 媒体查询，因为用户代理字符串无论如何都可以轻松修改。