对于移动端的轻量级 HTML5 互动小游戏(简称为 H5 轻互动),如果从屏幕呈现模式来划分的话,可以归类为:竖屏式和横屏式。
HTML5互动小游戏案例截图
平常我们做过的需求里,主要是以竖屏式为主,而横屏式较少。对于竖屏式场景来说,大家的经验会比较丰富,因此,此次主要式探讨下横屏式场景下的一些需要注意的点,特别是怎样去做横屏适配。
对于 H5 轻互动游戏来说,要实现横屏的话,主要是解决两点:
1.无论用户手持方向如何,都需要保证屏幕横向显示。
2.由于屏幕分辨率的多样化,因此就算是横屏下也是需要进行横屏适配,保证画面在所有分辨率下都能够合理适配。
下面,我们针对这两点分别阐述如何解决。
强制横屏显示
页面内容显示方向可分为竖排方向和横排方向,如下图所示。
页面内容显示方式:竖向排版和横向排版
对于竖屏式 H5 轻互动来说,页面会被期望保持竖排方向显示。而如果页面出现横排方向显示的情况,开发者往往会选择利用提示蒙层来进行友好提示,让用户自主保持竖屏体验,如下图所示。
提示蒙层提醒用户保持竖屏体验
同样地,在横屏式 H5 轻互动游戏中可以采取相同的措施进行简单处理,在页面内容按竖排方向显示时,开发者进行对用户提示其保持横屏体验。
但是,这对用户体验并不友好,因为这对于那些习惯于打开锁定为竖排方向功能(如下图所示)的 iOS 平台用户,或者是关闭屏幕旋转功能(如下图所示)的 Android 平台用户来说,他们需要多一个处理步骤——先关闭竖排方向锁定或是开启屏幕旋转,然后再横向手持设备。
竖排方向锁定功能(iOS)与屏幕旋转(Android)功能
因此,更好的做法是强制横屏显示,对屏幕 resize 事件进行监听,当判断为竖屏时将整个根容器进行逆时针 CSS3 旋转 90 度即可,代码如下所示。
1 |
// 利用 CSS3 旋转 对根容器逆时针旋转 90 度 |
但是!这里有坑:如果你是采用 CreateJS 框架进行开发,那么就不能通过 CSS3 途径对包含 Canvas 的根容器进行旋转处理,因为旋转后会导致 Canvas 内的舞台元素的事件响应位置错乱。
解决办法是,换成利用 CreateJS 框架内的 Stage 的 rotation
属性对整个舞台旋转处理,代码如下:
1 |