2

我正在构建一个 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;
          }    
}

}

例如，设备宽度 > 480 on potrait 和 < 480 && etc etc....

4

4 回答 4

1

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

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

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

于 2012-04-26T07:53:40.923 回答
1

据我了解，你想要这样的东西

function detectDevice(s) {
    var userAgent = navigator.userAgent.toLowerCase(),
        platform = navigator.platform.toLowerCase();
    if (s) {
        if (userAgent.match(s.toLowerCase()) != null)
            return true;
        return false;
    }

    this.isSmall = function() {
        if (screen.width <= 480 && screen.height <= 480)
            return true;
        return false;
    };
    this.device = function() {

        var a = ["Android", "iPhone", "iPad", "iPod", "BB", "webOS"];
        for (var i = 0; i < a.length; i++) {
            if (userAgent.match(a[i].toLowerCase()) != null)
                return a[i];
        }
        var a = ["Win", "Mac", "Linux"];
        for (var i = 0; i < a.length; i++) {
            if (platform.match(a[i].toLowerCase()) != null)
                return (a[i] == "Win") ? "Windows" : a[i];
        }
        return "Unknown Device";
    };
    this.userAgent = userAgent;
    this.platform = platform;
}

例子

于 2012-04-26T08:27:26.233 回答
1

基本上，你不能。知道这一点的唯一方法是通过某种方式获取 DPI 设置，然后将分辨率除以它。但是，JavaScript 无法访问 DPI。有关详细信息，请参阅此问题：您可以在 Javascript 函数中访问屏幕显示的 DPI 设置吗？

于 2012-04-26T08:36:18.857 回答
1

好的，所以我发现是这样的

 var screenType = {
        isMobileScreen: function () {
            if (deviceIs.iPhone || deviceIs.iPod || deviceIs.BB || deviceIs.webOS || deviceIs.mobile || (currentRES.width <= 480 && currentRES.height <= 720)) {
                return true;
            }
            return false;
        }
    };

而且我还添加了更多设备列表。

 var deviceIs = {
        mobile: agent.match(/Android; Mobile|opera mini|opera mobi|skyfire|maemo|windows phone|palm|iemobile|symbian|symbianos|fennec/i),
        iPhone: agent.match(/iPhone/i),
        iPad: agent.match(/ipad/i),
        tab: agent.match(/ipad|android 3|gt-p7500|sch-i800|playbook|tablet|kindle|gt-p1000|sgh-t849|shw-m180s|a510|a511|a100|dell streak|silk/i),
        iPod: agent.match(/iPod/i),
        BB: agent.match(/BlackBerry/i),
        webOS: agent.match(/webOS/i)
    };
于 2012-07-11T13:14:15.773 回答