如何确定客户端是否为触摸设备
如何确定客户端是否为触摸设备?
这个问题出现的原因是作者在浏览网页时发现了一个简单的代码片段,并希望通过该代码来判断客户端是否为触摸设备。作者还提到,他不太相信这个代码的准确性,因为他在自己的非触摸设备的 Mac 上测试时,结果显示为真。他认为这段代码只是简单地询问浏览器是否支持触摸设备。
为了解决这个问题,可以使用更准确的方法来判断客户端是否为触摸设备。以下是一种可能的解决方法:
function isTouchDevice() { return (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)); } if (isTouchDevice()) { alert("It's a touch screen device."); } else { alert("Others devices"); }
这段代码定义了一个名为isTouchDevice()的函数,该函数使用了更全面的方法来判断客户端是否为触摸设备。它检查了三个条件:浏览器的ontouchstart属性、navigator.maxTouchPoints属性和navigator.msMaxTouchPoints属性。如果满足其中任意一个条件,则判断为触摸设备。否则,则认为是其他设备。
通过使用这种更全面的方法,可以更准确地判断客户端是否为触摸设备,避免了原始代码的不准确性。这样,开发者可以根据客户端的类型来优化网页的交互和设计。
如何确定客户端是否为触摸设备?
有时候我们需要在网页中根据设备类型的不同来实现特定的功能或样式,例如在触摸设备上提供更友好的用户界面。那么,如何确定客户端是否为触摸设备呢?
我们可以使用以下的JavaScript函数来判断:
function isTouchDevice() { var el = document.createElement('div'); el.setAttribute('ongesturestart', 'return;'); return typeof el.ongesturestart === "function"; }
请注意,上述代码只测试浏览器是否支持触摸事件,而不是设备本身是否为触摸设备。
相关链接:
- [How to detect a mobile device using jQuery](https://stackoverflow.com/questions/3514784)
- [How to optimize website for touch devices](https://stackoverflow.com/questions/2607248)
- [What's the best way to detect a 'touch screen' device using JavaScript?](https://stackoverflow.com/questions/4817029)
- [Mozilla.org Detecting touch: it’s the ‘why’, not the ‘how’](https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/)
可能还有一些jQuery移动端和jtouch中的设备检测功能。
需要注意的是,该方法在iPhone上可以正常工作,但是对于Android、BlackBerry、Symbian、WebOS等设备可能不适用。
有用户反馈在使用iOS 7.0.6的iPhone上使用Safari浏览器时返回的结果是false。
如果以上方法不适用,可以参考以下链接中的方法:
- [stackoverflow.com/questions/4817029](http://stackoverflow.com/questions/4817029)
- [hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/](https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/)
总结起来,确定客户端是否为触摸设备的方法有多种,可以根据具体需求和设备兼容性选择合适的方法。