Question

在我正在建设的网站上，我有一组导航按钮需要很大才能看起来不错并且易于点击，但是当用户不导航时需要很小。因此，在我的UI中，我将按钮缩小到缩略图，并在鼠标悬停时将其设置为完整大小。这很有效。

但是在平板电脑上，没有鼠标，没有鼠标悬停，所以我需要另一种让用户导航的机制。我想让用户点击缩略图，然后展开完整的导航按钮栏，然后用户可以点击导航。

问题是：如何判断用户是否在没有鼠标的情况下进行浏览？我想我可以浏览器检测到，但这看起来真的很不稳定。

或者，有人可以指出我对这种情况有更好的UI设计模式吗？

Answer 1

一种选择是检测浏览器代理。

但您也可以注册仅在触摸设备上触发的touchstart/touchmove/touchend事件的侦听器。

BTW有一个新的CSS media queries in level 4。

对你来说最有意思的可能就是“指针”，用户代理应该返回“无指针”粗| “根据规范，”“精细”指向系统的典型例子是鼠标，触控板或基于触笔的触摸屏。基于手指的触摸屏可以称为“粗糙”。“

Answer 2

创建自定义单击事件，将其与函数绑定，然后最终将创建的单击事件分派给文档。如果功能成功设法触发，则用户有鼠标，否则它可能是任何无鼠标设备

Answer 3

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

确保仅在身体装载开始时运行！ DEMO

如何检测网站中是否存在鼠标？

3 个答案: