Question

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

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

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

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

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

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

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

我应该制作所有可用于悬停的元素，例如：导航，可以使用tabindex = "1"？

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

opera mini浏览器不支持javascript吗？

Answer 1

非触控移动浏览器的市场份额是多少？有多少用户使用这些浏览器？

我们没有这些数据。但根据目前操作系统和设备用户份额的市场份额，它很难达到1％。但主要关注的不是因为非触控移动设备。浏览器窗口并不总是最大化，用户甚至可以减小宽度。 768px。即。以1400 x 900分辨率使用并排浏览器和记事本。

我使用bootstrap创建了我的整个网站，假设小屏幕设备的触摸功能。现代html css最佳做法是否建议仅针对支持触摸的移动设备制作网站？

没有。目前的建议是使用移动优先方法的响应式设计。使用移动网站分开复制代码，设计，维护和费用。它还会出于商业目的影响SEO和流量分析。

我应该制作所有可用于悬停的元素，例如导航，可以用tabindex =“1”聚焦吗？

是和否。所有可点击元素（按钮，链接）和输入表单都应该是可访问导航的对象，但是您不一定需要为所有可点击元素设置tabindex以生成“可聚焦”元素，浏览器将默认为按代码排序。如果默认顺序对您没有意义，或者您想确保您有更正的流量，请使用tabindex强制执行导航链接流程。

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

opera mini浏览器不支持javascript吗？

没有。以及现代CSS。由于使用代理压缩页面资源的性质，Opera Mini降低了交互性。

Opera Mini在非洲，中东和东欧更受欢迎。如果这些区域不是您的用户关注点，我会建议您不要花时间在make网站上完全使用Opera Mini。

Answer 2

非触控移动浏览器的市场份额是多少？有多少用户使用这些浏览器？

这通常取决于地区，因此取决于您的受众群体。您可以从

获得一些想法

https://deviceatlas.com/device-data/explorer/webusage-by-country/traffic/mobile/country/us/type/browser_name

http://gs.statcounter.com/#all-as-ww-monthly-201610-201612-map

但根据我的经验，这些并不是很有帮助，因为很多因素决定了您的产品所关注的客户类型，除非它是一个非常广泛适用的产品，例如在一个销售高价值产品的小众电子商务网站上，你会发现Safari很突出。因此，在解决问题之前，如果您可以收集一些数据（如果您有现有产品）或在论坛/ fb组中向在类似域中拥有产品的人询问，那么它将帮助您确定优先级，因为构建问题比保持它。

我已经使用bootstrap创建了我的整个网站，假设小屏幕设备的触摸功能。现代html css最佳做法是否建议仅针对支持触摸的移动设备制作网站？编辑：听完建议后，我决定优化非触控移动设备。但我不确定它们是如何模仿鼠标行为的。我猜测可以选择和点击可聚焦的元素。所以，

如果您想覆盖各种浏览器，请使用https://modernizr.com检测功能并做出相应响应或进行后备互动。注意，如果您只需要很少的功能，那么拉动库总是不是一个好主意，所以请查看您的用例。另一方面，优点是它不断更新。

您可以在此处查看由不同浏览器触发的触摸（和类似）事件列表http://www.quirksmode.org/mobile/tableTouch.html#link1

有关苹果非触摸事件的列表，请查看此项 https://developer.mozilla.org/en-US/docs/Web/API/Force_Touch_events

同样，你必须挖掘你想要支持的浏览器的事件列表。

我应该制作所有可用于悬停的元素，例如导航，可通过tabindex =＆＃34; 1＆＃34;？
进行聚焦

对于tabindex，安德烈建议的是正确的（对于重要元素有正确的顺序，应该在测试阶段完成）。

选中此项以了解何时避免以及可能产生问题的情况。除了这里列出的内容之外，还有更多内容，如果你使用tabindex玩太多，那么做一个很好的研究。

https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex

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

opera mini浏览器不支持javascript吗？

在大多数情况下，Opera Mini处理是通过Opera服务器完成的，这通常会阻止JS正常工作。

这些是某些功能的变通方法，您可以参考https://operamini.tips/#/

所有人都说，我仍然建议，做一个好的目标用户研究，并从那里优先考虑你的初始版本的支持列表。它可能需要投入时间和一些钱，但它是完全值得的。然后改进入围的那些，直到你能够删除主要的错误，当你有带宽然后攻击列表的下一部分。首先支持太多浏览器/设备/屏幕的方法会让你失去支持迷宫＆＃34;从那里你将被困在各地删除bug，功能开发将失去焦点。

还可以很好地集成GA分析（或任何其他），并将事件附加到主要交互，并根据屏幕大小，设备和浏览器进行监控。例如Opera Mini在某些页面中为我提供0个事件并引发警报。有时它可能不是0但是用户访问的用户比例很低。您可以使用滚动，字段选择等附加事件。首先优先考虑产品的主要功能，跟踪，选择要关注的内容，改进，测试然后转到下一部分。因此，基本上这将形成具有浏览器/屏幕大小的功能矩阵，然后根据您的流量类型进行相应的优先级排序。

Answer 3

您可以使用detectmobilebrowsers中的代码。只需将网址http://www.detectmobilebrowsers.com/mobile替换为移动网页的网址即可。这是javascript代码的直接link。只需将文件扩展名更改为js，一切正常。

我应该考虑每个小于768px的移动设备吗？

3 个答案: