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;
          }    
}

}

例如设备宽度＆gt; potrait上的480和＆lt; 480＆amp;＆amp;等等....

Answer 1

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

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

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

Answer 2

据我了解，您需要this

之类的内容

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;
}

Example

Answer 3

基本上，你不能。了解这一点的唯一方法是通过某种方式获得DPI设置，并将分辨率除以它。但是，javascript无法访问DPI。有关详细信息，请参阅此问题：Can you access screen display’s DPI settings in a Javascript function?

Answer 4

好的，我发现的是这样的

 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)
    };

我如何在移动设备和大屏幕设备之间进行分类。

4 个答案: