html - 手机浏览器支持html5 canvas

Question

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

Answer 1

标题答案：
iOS和Android手机全球支持caniuse，详情请见 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

Answer 2

控件

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

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

活动

查看有关如何添加事件的 Apples 指南。

基本上是这样的：

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