5

私が構築している Web サイトには、見栄えを良くして簡単にクリックできるように大きくする必要がある一連のナビゲーション ボタンがありますが、ユーザーがナビゲートしていないときは小さくする必要があります。そのため、私の UI では、ボタンをサムネイルに縮小し、マウス ホバーでフル サイズにアニメーション化します。これはうまくいきます。

しかし、タブレットにはマウスもホバーもありません。そのため、ユーザーが移動できるようにするための別のメカニズムが必要です。ユーザーがサムネイルをタップしてから、完全なナビゲーション ボタン バーを展開し、ユーザーがタップして移動できるようにすることを考えていました。

問題は、ユーザーがマウスなしでブラウジングしているかどうかをどのように判断できるかということです。ブラウザで検出できると思いますが、これは本当に不安定なようです。

あるいは、誰かがこの状況のた​​めのより良い UI デザイン パターンを教えてくれますか?

4

3 に答える 3

2

One option is to detect the browser agent.

But you may also register listeners for touchstart/touchmove/touchend events which are triggered only on touch devices.

BTW there is a new CSS media queries in level 4.

Perhaps the most interesting for you would be the "pointer", for which the user agent is expected to return “none | coarse | fine.” According to the the spec, “typical examples of a ‘fine’ pointing system are a mouse, a track-pad or a stylus-based touch screen. Finger-based touch screens would qualify as ‘coarse.’”</p>

于 2012-08-02T16:32:58.877 に答える
0

カスタム クリック イベントを作成し、それを関数にバインドし、最後に作成したクリック イベントをドキュメントにディスパッチします。関数が正常にトリガーされた場合、ユーザーはマウスを持っています。それ以外の場合は、マウスのないデバイスである可能性があります

于 2012-08-02T16:39:08.780 に答える
0 
function isEvent(ev)
{
    var d=document;
    var isTrue=false;
    var fn=function()
    {
        isTrue=true;
    }
    d.body.onclick=fn;
    var e;
    if(d.createEvent)
    {
        e=d.createEvent('Event');
        e.initEvent(ev,false,false);
        d.body.dispatchEvent(e);
    }
    else if(d.createEventObject)
    {
        e=d.createEventObject(window.event);
        d.body.fireEvent('on'+ev,e);
    }
    return isTrue;
}

//run the code
var isMouse=isEvent('click');
if(isMouse)
{
    alert('user has a mouse');
}

ボディのロードが開始されたときにのみ実行してください。 デモ

于 2012-08-02T17:20:52.993 に答える