移动电话浏览器中的HTML5画布支持

Question

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

- mridul

Answer 1

标题的答案：
Canvas得到iOS和Android手机的全球支持， 有关详细信息，请参见caniuse.com： http://caniuse.com/#feat=canvas

消息的答案：
移动设备没有物理键盘。
对于键，您可以使用指针事件API（以及其Polyfill）来创建虚拟摇杆，此教程提供更详细的说明： http://www.codeproject.com/Articles/594186/Create-a-Cross-browser-Touch-based-Joystick-with-Hand-js

- Yukulélé

Answer 2

控制

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

一个非常好的虚拟键盘教程可以在这里找到。看看演示吧！

事件

查看苹果关于如何添加事件的指南。

基本上是以下：

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提供的以下页面：屏幕尺寸分析。

它们通常分为以下类别

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

- Jarrod