我编写了一个jQuery插件,可以在桌面和移动设备上使用.我想知道是否有一种方法可以检测设备是否具有触摸屏功能.我正在使用jquery-mobile.js来检测触摸屏事件,它可以在iOS,Android等上运行,但我也想根据用户的设备是否有触摸屏来编写条件语句.
那可能吗？
:hover如果用户通过触摸设备访问我们的网站,我想忽略所有CSS声明.因为:hoverCSS没有意义,如果平板电脑在点击/点击时触发它,它甚至会令人不安,因为它可能会坚持直到元素失去焦点.说实话,我不知道为什么触摸设备:hover首先需要触发- 但这是现实,所以这个问题也是现实.
a:hover {
color:blue;
border-color:green;
// etc. > ignore all at once for touch devices
}
那么,(如何):hover在声明触摸设备之后,我可以一次性删除/忽略所有CSS 声明(不必知道每一个)吗？
我尝试检测哪个鼠标按钮 - 如果用户在jQuery下的mousemove事件期间按下了,但是我得到了模棱两可的结果:
no button pressed: e.which = 1 e.button = 0
left button pressed: e.which = 1 e.button = 0
middle button pressed: e.which = 2 e.button = 1
right button pressed: e.which = 3 e.button = 2
码:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<input id="whichkey" value="type something">
<div id="log"></div>
<script>$('#whichkey').bind('mousemove',function(e){
$('#log').html(e.which + ' : ' + e.button );
}); </script>
</body>
</html>
如何判断按下鼠标左键和没有按钮之间的区别？
我想检测屏幕阅读器是否在用户的机器上运行,以避免与html中的音频标签发生声音冲突.如果是,请提供有关如何完成此操作的详细信息.
我有一个HTML + JavaScript的全屏游戏,它使用箭头键作为主要控件.这不能用在无键盘的Android设备上(我还没有在iOS上测试过),即使软键盘上有箭头键,它也会占用不必要的空间.因此,我添加了屏幕控制按钮.但是,桌面浏览器上的按钮是不必要的(并且非常大),所以我希望它们不会弹出,除非需要它们.
我可以使用什么启发法来决定是否需要它们 - 也就是说,用户输入箭头键事件是否不可能或尴尬 - 除了识别特定的用户代理(这是直截了当的,但不是面向未来的)？
我当然会允许用户隐藏/显示按钮; 我正在寻找有用的启发式方法来选择默认设置.
今天(或最近)Chrome Beta已经为我更新到了17,我发现我的网络应用程序中有一些功能.我注意到这是因为正在将一个类添加到body元素中,如果有触摸事件支持我通常只会放在那里,我会像这样检查:
try {
document.createEvent("TouchEvent");
_device.touch = true;
} catch (e) {
_device.touch = false;
}
当然,我可以在Chrome 17上创建和触发触摸事件.我的第一个想法是,哦,我可以检查触摸,看看鼠标是否失败,因此,有一个鼠标,但MouseEvents也会触发.
如果没有用户代理嗅探,我还能检查它是一个真实的,可触摸的设备,而不仅仅是支持触摸事件的浏览器.
有没有办法使用JavaScript来检测给定的浏览器是将焦点<select multiple>元素呈现为弹出窗口还是仅作为内联框？
在某些平台上,例如Android浏览器和iOS Safari,可以通过比较,例如,高度来检测弹出窗口的使用情况.
<select multiple>
<option>a</option>
<option>a</option>
<option>a</option>
<option>a</option>
<option>a</option>
<select>
和
<select multiple>
<option>a</option>
<select>
高度是相同的,因为<select>s减少到一个带有下拉按钮的盒子.但是在其他设备上,例如Playbook,这个测试会给出误报,因为Playbook浏览器渲染了扩展的选择列表,并在点击时显示弹出窗口.
任何人都可以想出一种可靠的方法来确定是否显示本机选择弹出窗口？
html javascript select cross-browser browser-feature-detection
具有触控功能的设备应如何区分纯触控和具有鼠标功能的设备？(就像今天的一些笔记本电脑)
需要在应用程序中优先考虑所有鼠标功能,如果运行应用程序的设备仅具有触摸支持,则需要更改功能.
如果触摸设备也有鼠标指针,逻辑建议应用程序应该将该设备视为普通桌面,并且可能还添加触摸支持,但样式本身应该响应鼠标事件.
正常的触摸检测是这样实现的:
'ontouchend' in document;
检测计算机是否为台式机的一种方法可能是检查屏幕分辨率:
window.screen.width >= 1280 // desktop
但这并不是那么好,因为有些设备可能具有非常大的视口分辨率,而某些笔记本电脑可能具有低分辨率......
听起来是一个简单的问题，但结果证明解决起来非常具有挑战性。对于某些网站，我的内容只有在用户悬停/聚焦链接时才会显示。然而，该链接本身有一个目标。
如果触摸屏用户单击这些链接之一，浏览器会立即转到该href位置。这意味着悬停内容永远不可见！
这就是为什么没有鼠标（或其他可以像魔术遥控器一样悬停的设备）的用户应该看到替代内容的原因。但是我怎样才能检测到这一点？
$(document).on('click','#my-menu-inner > ul > li > a',function(e) {
if(clientHasInputDeviceSupportingHover()) {
return true;
} else {
e.preventDefault();
$('#for-no-hover-visitors').html('');
$(this).clone().appendTo('#for-no-hover-visitors');
$(this).next().clone().appendTo('#for-no-hover-visitors');
}
});
function clientHasInputDeviceSupportingHover() {
// HOW CAN I DETECT THIS???
if($('#checkhover:checked').length > 0) {
return true;
}
return false;
}.clearfix::after {
content: "";
clear: both;
display: table;
}
#my-menu-inner > ul {
margin:10px;
width:100%;
background-color:yellow;
list-style-type:none;
position:relative;
}
#my-menu-inner > ul > li {
float:left;
margin:20px;
}
#my-menu-inner > ul > li > a …