相关疑难解决方法(0)

我正在使用jQuery Datepicker,我有一点问题.

如果打开了日期选择器,并再次单击输入字段,则不会执行任何操作.如何更改...如果已经打开了输入点击关闭的选择器？

提前致谢...

我一直在制作一个在触摸设备上的行为与桌面不同的网站.主要区别在于大多数悬停效果都会更改为触摸设备上的点击次数.要检查用户代理是否是触摸设备,我在javascript中使用它:

var yesIfTouchDevice = (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));

if(istouchdevice) {
  // change hover to clicks
}

然后在css中我假设每个768px以下的用户代理都是触摸设备.我做了布局设想.例如,我有一个切换按钮,可以显示菜单.此外,我还有许多其他东西只显示弹出窗口和其他隐藏层(触摸事件).

就在几分钟前,人们开始意识到有很多手机没有启用触控功能,比如诺基亚Asha和N系列等等,我甚至都不知道.我的问题是:

1. 非触摸移动浏览器的市场份额是多少？有多少用户使用这些浏览器？
2. 我已经使用bootstrap创建了我的整个网站,假设小屏幕设备的触摸功能.现代html css最佳做法是否建议仅针对支持触摸的移动设备制作网站？

编辑:听完建议后,我决定优化非触控移动设备.但我不确定它们是如何模仿鼠标行为的.我猜测可以选择和点击可聚焦的元素.所以,

3. 我应该制作所有可用于悬停的元素,例如导航,可以集中注意力tabindex = "1"吗？

我一直在Kemulator中的opera mini浏览器上测试我的网站,发现它在我点击导航时重新加载页面,而其他一些图层没有显示,例如弹出的bootstrap模式.

4. opera mini浏览器不支持javascript吗？

我知道您可以按照以下答案检测浏览器是否在带有触摸屏的设备上运行：/sf/answers/337392051/

但是，我知道有些设备同时具有触摸屏和鼠标。我可以检测出这些类型的触摸之间的差异吗？本质上我想区分 3 个不同的事件：（onClick在单击或触摸时触发），onTouch（仅在触摸时触发），onMouseClick（仅在单击时触发）。

我希望我的主徽标在鼠标移动时改变.

我知道有几种方法可以实现这一点,并且想知道什么是稳定性,浏览器兼容性,效率和易于设置的最佳方式.

我发现的一些方法是:

• Javascript(jQuery)替换"src"属性.
• CSS使用背景和"悬停"

还有吗？什么是最好的？

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

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

问题是:如何判断用户是否在没有鼠标的情况下进行浏览？我想我可以浏览器检测到,但这看起来真的很脆弱.

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

我正在尝试让下拉菜单在基于触摸的设备上正常工作。单击时菜单可以正常打开，但由于父元素也是一个链接，因此它会在选择下拉项之前将用户带到该链接。

有没有办法让（仅在触摸设备上）第一次点击父元素打开下拉菜单，第二次点击将您带到链接？

我对 HTML 和 CSS 有很好的了解，但对 javascript 却一无所知，所以如果解决方案是基于脚本的，请尽可能具有描述性。

谢谢

TL;DR 版本

如何使用普通 JavaScript 检查用户是否在触摸设备上和/或可以悬停？

详细版

这篇文章提出了无数种不同的方法来解决这个问题。但现在已经是 2020 年了，浏览器和设备上发生了很多事情，所以我想我应该划清界限并开始一个新问题。许多答案没有考虑所有极端情况：

• 就像手写笔一样
• 就像苹果的神奇鼠标（显然）模拟触摸事件（我听说过这个，我自己没有体验过）。
• 就像新的 iPad Pro 一样，它模拟了 Macbook Pro 的 Safari。
• 就像功能发生变化一样，用户获得/失去“触摸”的能力（就像使用 Chrome 开发者工具启用移动视图时一样）。

我的发现

不要使用window.matchMedia('(any-pointer: XXXXX)').matches

window.matchMedia一些答案表明“新奇” any-pointer: coarse|none|fine。然而，我很幸运，我有一部 OnePlus 5t。因为 matchMedia 在我的设备上的 Firefox 和 Chrome 中都不起作用（错误匹配）。我尝试了 A TON，因为我希望有相同的 CSS 检查，所以我的 JavaScript 和 CSS 相互对应，确保样式和功能匹配。

不要使用 userAgent 匹配

这不是一个好主意，因为每次新浏览器出现时都需要维护 userAgent 列表。因此，这样做并不能保证未来的发展。就像前面提到的 iPad Pro 示例一样。

不要使用人类接触

这篇 Code Burst 文章建议使用人体触摸而不是检测设备触摸。这可能是解决方案的一部分。但是，如果我有一个供触摸用户使用的菜单，那么我必须立即显示该菜单，而不是等待用户触摸屏幕后再显示。

此代码在桌面浏览器中正常工作:

$(window).click(function() {...});

但是在iPad上的Safari中,它根本不会发射.这不受支持吗？当有人触摸浏览器窗口中的某个地方时,通知的正确方法是什么？

QML，Qt或C ++中是否有一种方法可以知道屏幕（或平台）是否支持触觉，更具体地说，屏幕是否支持多点触控

这有可能吗？

编辑：

在Windows上，似乎我们可以尝试枚举该设备以找到与https://support.microsoft.com/en-us/kb/259695相匹配的设备

在Linux上也应该可以

相关：

What's the best way to detect a 'touch screen' device using JavaScript?

Is there a way to determine if the current screen supports touch?

如果正在使用的浏览器是移动设备,我无法操纵我的代码来隐藏一个特定的DIV.

背景故事:我正在构建一个自定义的WordPress模板,我的设计完全响应,除了一个特定的DIV,我正在使用一些悬浮技术,只是看起来不像使用触摸屏,所以我想隐藏如果用户正在使用移动设备,该部分.

我做了一些搜索,发现这个小巧的代码可以检测出浏览器是否是一个移动设备(如果确实存在,请随时指向一个更好的代码,但没有什么巨大或任何东西),我现在只是给它一个警告框告诉我它是否是移动浏览器:

<script type="text/javascript"> 
    var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
    if (mobile) { alert("MOBILE DEVICE!!"); } else { alert("NOT A MOBILE DEVICE!!"); }
</script> 

现在,我想做的就是让它基本上说:

if (mobile) { .navWrap {display: none;} }

我知道这不是一个有效的代码,我做了一些测试,getElementById但无法弄清楚如何实现我的目标.我确实将我的.navWrap类更改为#navWrap,因此它可以被选中,getElementById但是也没有用.

那么,你们中任何一位出色的天才能帮到我吗？谢谢!