javascript 如何使用javascript检测触摸设备浏览器与桌面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12342092/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect touch device browsers vs desktop using javascript?
提问by Alex
What is the code to detect touch devices (smartphones and tablets) vs desktops browsers using userAgent.match and return a boolean variable (for example 'isipad')?
使用 userAgent.match 检测触摸设备（智能手机和平板电脑）与台式机浏览器并返回布尔变量（例如“isipad”）的代码是什么？
I need to test this against Android and Apple devices mainly. If the device browser is Android or Apple, return isipad = false. Else, return isipad = true.
我需要主要针对 Android 和 Apple 设备进行测试。如果设备浏览器是安卓或苹果，则返回isipad = false。否则，返回 isipad = true。
So far I went about it like this (for iDevice browser detection) :
到目前为止，我是这样处理的（用于 iDevice 浏览器检测）：
if( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ||navigator.userAgent.match(/iPad/i) )
{var isipad = true;}
else
{var isipad = false;}
It seems to work, however I would love to be able to add the android browser as well, in this case.
它似乎有效，但是在这种情况下，我也希望能够添加 android 浏览器。
Thanks in advance. Alex
提前致谢。亚历克斯
回答by Pratswinz
if ("ontouchstart" in document.documentElement)
{
alert("It's a touch screen device.");
}
else
{
alert("Others devices");
}
most simple code i found after browsing a lot here and there
我在这里和那里浏览了很多后发现的最简单的代码
回答by jfriend00
You really should not try to figure out what type of device it is. Instead, you should examine the capabilities of the host device and have your code adapt to the capabilities it finds regardless of what type of device it is. This is called "feature detection" and is considered a much better way to do things than detecting a particular browser or device.
你真的不应该试图弄清楚它是什么类型的设备。相反，您应该检查主机设备的功能并让您的代码适应它找到的功能，而不管它是什么类型的设备。这称为“特征检测”，被认为是比检测特定浏览器或设备更好的处理方式。
For example, when Windows 8 tablets come out, there will be devices with both mouse and touch.
例如，当 Windows 8 平板电脑问世时，就会出现鼠标和触控并存的设备。
There are lots written on how to detect touch capabilities. See these for ideas:
有很多关于如何检测触摸功能的文章。请参阅这些以获取想法：
http://alastairc.ac/2010/03/detecting-touch-based-browsing/
http://alastairc.ac/2010/03/detecting-touch-based-browsing/
Optimize website for touch devices
回答by davehale23
Although I agree with @jfriend00 that you should use "feature detection" rather than using the user agent, but it sounds like the user agent is your only option. I use this web sitefor mobile browser detection. They frequently update their code based on new devices, so update yours occasionaly. Here is the JS code:
尽管我同意@jfriend00 的观点，即您应该使用“功能检测”而不是使用用户代理，但听起来用户代理是您唯一的选择。我使用此网站进行移动浏览器检测。他们经常根据新设备更新他们的代码，所以偶尔更新你的。这是JS代码：
(function(a,b){if(/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile');
Here is a fiddleof it in action.
这是它在行动中的小提琴。
回答by Brian Frisch
I've tested up against detectmobilebrowsers.com with and iPad mini and a Surface-tablet, and both of them returned ”No mobile browser detected”.
我用 iPad mini 和 Surface 平板电脑测试了 detectmobilebrowsers.com，它们都返回“未检测到移动浏览器”。
The strangest part about that was, that the User-Agent string for iPad mini actually contains the word "Mobile", which would suggest that it wouldn't be so difficult to determine as a mobile device.
最奇怪的是，iPad mini 的 User-Agent 字符串实际上包含“Mobile”一词，这表明作为移动设备来确定它不会那么困难。
