我应该考虑每个小于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最佳做法是否建议仅针对支持触摸的移动设备制作网站？

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

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

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

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

Answer 1

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

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

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

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

我是否应该使所有可用于悬停的元素,例如导航,可以使用tabindex ="1"进行聚焦？

是的,不是.所有可点击的元素(按钮,链接)和输入表单应该是可访问导航的对象,但是您不一定需要tabindex为所有可点击元素设置然后制作"可聚焦"元素,浏览器将按照默认排序通过代码中的外观进行.使用tabindex强制执行的导航链接流,如果默认顺序没有意义的,你或者你要确保你将有校正流量.

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

opera mini浏览器不支持javascript吗？

没有.还有现代的CSS.由于使用代理压缩页面资源的性质,Opera Mini降低了交互性.

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

Answer 2

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