手机浏览器支持html5 canvas答案

【问题标题】：html5 canvas support in mobile phone browser手机浏览器支持html5 canvas
【发布时间】：2013-07-15 14:10:43
【问题描述】：

我开发了一个简单的基于 html5 的游戏。在这个游戏中有 4 个控制键向左、向右、向上和向下箭头（keydown 事件）。它在我的笔记本电脑浏览器中运行良好。我喜欢为手机定制这个游戏。什么是手机（Android，IOS）中适合读取输入的事件。以及移动浏览器中画布的标准尺寸（高度和宽度）？

【问题讨论】：

标签： html mobile html5-canvas

【解决方案1】：

对标题的回答：
canvas 在全球范围内被 iOS 和 Android 手机支持，在 caniuse.com 上查看更多详细信息： http://caniuse.com/#feat=canvas

回复消息：
手机没有键盘。
对于按键，您可以使用指针事件 API (and its polyfill) 来制作虚拟操纵杆，请查看本教程以了解更多详细信息： http://www.codeproject.com/Articles/594186/Create-a-Cross-browser-Touch-based-Joystick-with-Hand-js

【讨论】：

【解决方案2】：

控件

这是您可以发挥创意的地方。虚拟键盘可以或可能将屏幕分成多个部分。左边是左边，右边是右边等等。真的取决于你的游戏类型。

一个非常好的虚拟键盘教程可以是found here。查看演示！

活动

查看Apples guide on how to add events。

基本上是这样的：

element.addEventListener("touchstart", touchStart, false);
element.addEventListener("touchmove", touchMove, false);
element.addEventListener("touchend", touchEnd, false);
element.addEventListener("touchcancel", touchCancel, false);

另外，我推荐像hammerJS 这样的库。它处理触摸事件并为您简化手势。

屏幕尺寸

苹果很简单，你有 320×480、640×960、640×1136

Android 稍微复杂一些。最佳答案是查看 Google 提供的以下页面：Screen size analytics。

一般分为以下几类

xlarge 屏幕至少为 960dp x 720dp
大屏幕至少为 640dp x 480dp
普通屏幕至少为 470dp x 320dp
小屏幕至少为 426dp x 320dp

【讨论】：