2

私はWebアプリケーションを構築しています.2つのセットの流動的なレイアウトを持っています.1つは小さな画面のデバイス用で、もう1つは大きな画面用です.? では、これら 2 つのカテゴリの間にベンチマークを配置するにはどうすればよいでしょうか。さまざまな css メディア クエリとデバイス検出手法を js に配置する方法を知っています。

しかし、これら2つのカテゴリを区別するための一般的な基準が必要です

例：私は持っています

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 で、potrait では < 480 && など ....

4

4 に答える 4

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

わかりましたので、私が見つけたのはこのようなものです

 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 に答える
1

基本的に、できません。それを知る唯一の方法は、何らかの方法で DPI 設定を取得し、それで解像度を割ることです。ただし、JavaScript で DPI にアクセスすることはできません。詳細については、この質問を参照してください: Javascript 関数で画面表示の DPI 設定にアクセスできますか?

于 2012-04-26T08:36:18.857 に答える
1

小さな画面とは何か、そうでないものは何だと誰が言いますか?

たとえば、新しい iPad は (通常の画面と比較して) サイズがかなり小さいですが、HD 標準よりも 100 万ピクセル多い高解像度を実現しています。

個人的には、とにかくユーザー エージェント文字列は簡単に変更できるので、CSS メディア クエリを使用します。

于 2012-04-26T07:53:40.923 に答える