HTML5互动小游戏案例截图
平常我们做过的需求里，主要是以竖屏式为主，而横屏式较少。对于竖屏式场景来说，大家的经验会比较丰富，因此，此次主要式探讨下横屏式场景下的一些需要注意的点，特别是怎样去做横屏适配。
对于 H5 轻互动游戏来说，要实现横屏的话，主要是解决两点：
1.无论用户手持方向如何，都需要保证屏幕横向显示。
2.由于屏幕分辨率的多样化，因此就算是横屏下也是需要进行横屏适配，保证画面在所有分辨率下都能够合理适配。

横屏适配处理
面对移动端多分辨率繁复冗杂的情况，我们对于一般情况下（也就是常见的竖屏式）页面适配处理可以说是烂熟于心，但是切换到横屏式场景下，同样的页面适配方法可以直接应用吗？会不会有什么问题呢？
下面笔者分别从 DOM 和 Canvas 两方面去着手阐述如何做横屏适配处理。
解决 DOM 的横屏适配问题
在移动端，常见的移动端适配方案是 REM 方案，而为了减少 JS 与 CSS 的耦合，笔者团队开发页面时采用的是 VW + REM 方案。（想要了解该方案的同学可详细阅读《利用视口单位实现适配布局》）。
因为页面适配的场景往往是竖屏式的，因此 VW + REM 方案表现得十分完美。但是遇上横屏式，它的缺点就暴露了出来。