4

デバイス幅を使用してデバイスを検出するページを設計し、それに基づいて、尊敬される js および css ファイルをロードします。modernizr で 3 つの条件を評価する方法と、デバイス (デスクトップ、モバイル、またはタブレット) を検出するためのより良い方法はどれですか

<script type="text/javascript">
            Modernizr.load([
                {
                    test: Modernizr.mq('(min-device-width: 320px) and (max-device-width: 728px)'),
                    yep : ['mob.css', 'jquery.mobile-1.1.0.css', 'jquery.mobile-1.1.0.js'],
                    nope : 'pc.css'
                }
            ]);

            if (!Modernizr.borderradius) {
                $.getScript("jquery.corner.js", function () {
                    $("input").corner();
                });
            }

            if(!Modernizr.required) {
                $("#frmSearch").submit(function(){
                    if($.trim($("#txtSearch").val().length) == 0){
                        alert('Please, Enter some keyword');
                        return false;
                    }
                });
            }
        </script>
4

1 に答える 1

1

Modernizr でこれを行う場合は、3 方向の条件を記述しようとしないでください。3 つの別々の true/false 条件を記述します。

つまり、「デスクトップ」、「モバイル」、または「タブレット」という 1 つの条件ではなく、「デスクトップ」、「モバイル」、または「タブレット」という 3 つの条件が必要で、それぞれが true または false になります。

うまくいけば、それはあなたの質問に答えます。

しかし、私が提起するもう 1 つのポイントは、これらのタイプの間にどのように線を引くかということです。

iPhone をモバイル、iPad をタブレットと言うのは簡単ですが、これらの間にはあらゆるサイズのデバイスがあります。モバイルがタブレットになる限界点はどこですか？また、ベースユニットに接続してラップトップになるタブレットはどうですか?

ここで問題になるのは、フォーム ファクターが非常に流動的であることです。レスポンシブ CSS と CSS メディア クエリを使用して、画面の解像度に合わせてサイトを動的に調整するだけのほうがよい場合があります。

それが役立つことを願っています。

于 2012-05-20T21:33:54.390 に答える