html - 我是否应该将所有小于 768px 的手机都视为触摸设备？

Question

我一直在制作一个网站，该网站在触摸设备上的行为与桌面设备不同。主要区别在于大多数悬停效果更改为触摸设备上的点击。要检查用户代理是否是触摸设备，我在 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 最佳实践是否建议只为支持触摸的移动设备制作网站？

编辑:在听取建议后，我决定也针对非触控移动设备进行优化。但我不确定它们一般是如何模仿鼠标行为的。我猜可以选择和单击可聚焦的元素。所以，

1. 我是否应该让我所有的元素都可以在悬停时工作，例如导航，可通过 tabindex = "1" 聚焦？

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

1. opera mini 浏览器对 javascript 的支持不是很好吗？

Answer 1

1. What is the market share of non touch mobile browsers? How many percent users use those browsers?

我们没有这个数据。但以目前的操作系统市场份额和设备用户份额来看，很难达到1%。但主要问题不是因为非触摸移动设备。浏览器窗口并不总是最大化，用户可以减小宽度，甚至 < 768px。 IE。在 1400 x 900 分辨率下使用并排浏览器和记事本。

2. I have made my whole website with bootstrap assuming touch functionality for small screen devices. Does modern day html css best practices suggest making website only for touch enabled mobile devices?

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

Should I make all my elements that work on hover, e.g. the navigation, focusable with tabindex = "1"?

是也不是。所有可点击元素(按钮、链接)和输入表单都应该是可访问导航的对象，但您不一定需要为所有可点击元素设置 tabindex 才能成为“可聚焦”元素，浏览器会做它作为代码中外观的默认排序。使用 tabindex 来强制执行您的导航链接流，如果默认顺序对您没有意义，或者如果您想要确保您有更正的流。

4. I have been testing my site on opera mini browser in Kemulator and found that it reloads page when I click on navigation and some other layers are not shown, e.g. the bootstrap modal pop up.

Does opera mini browser not support javascript well?

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

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