H5游戏开发之页面适配

最近做了不少运营类的需求，如：万能贴吧，圣诞约约约等，形式要么是偏交互的页面要么是简单的小游戏，积累了一些经验和想法，发出来跟大家讨论一下。本文涉及的是页面如何适配不同大小屏幕的问题，再也不想看到屏幕边缘多出一道道不协调的黑条条了TAT。

christmas.png

christmas_qr.png

wanneng.png

wanneng_qr.png

按照游戏通用的理论，从z轴方向将页面分层，大致可以分为背景层、游戏层、状态层和选项层；为了简单描述，就将后面的三层统称为功能层，浮在背景之上，直接跟用户交互，也意味着这部分不可被遮挡，无论怎么适配都要保证其可见、可用，所以功能层的物体一般都是相对于整个页面绝对定位(position：absolute)，然后top、left、width、height取百分比或算出对应的px，很蛋疼有木有？故推荐使用less一类自带计算器的武器。然后是背景层，我们重点要讨论的部分，也是多屏适配最蛋疼的部分。

背景层分类可以分为纯色/可重复纹理（指的是沿某方向repeat）、不可重复纹理、顶部不可重复/底部不可重复、整张不可重复单图这四类，又解释两个概念^_，纹理一般是抽象的，可以被一定程度的压缩或拉伸，单图一般是具象的物体，不可压缩或拉伸。如万能贴吧的首页，顶部是不可重复纹理，底部的猪是不可重复的单图；又如圣诞约约约的首页，无论是顶部的烟花、麋鹿和人，底部的树影、雪花都是具象的，可以认为是整图，这种也是ue最喜欢给的图……接着分类说下怎么适配：

1.纯色/可重复纹理
额，直接用background的repeat，简单粗暴但好使。

2.不可重复纹理
因为纹理可以被压缩或拉伸，所以如果是使用background-image的话，background-size则设为cover；如果是用img标签，则高宽都设为100%。然后切图的大小，高宽可以取一个适中的值，如400*800。缺点是可能造成背景稍微的模糊，但抽象本来就是模糊的嘛，还可以接受。

3.顶部不可重复/底部不可重复
说起来也简单，首先能重复部分的处理跟1或2一样，覆盖整页。不能重复的部分单独切图，然后当做功能层的物体来定位，盖在重复的背景之上。

4.整张不可重复单图
当然，你也可以跟3那样，将这些具象的东西都分别切图，把它们当成功能层的物体来定位，但是如果物体数量多（比如圣诞约约约的首页），无论是从时间成本还是带宽成本来看都不算好的方案。再回想一下多屏适配的问题，为啥会出现边缘的黑条，因为切出的背景图的宽高比是固定的，而不同设备的屏幕宽高比不一样，所以要解决这个问题，自然而然想到将图片「裁剪」。页面渲染的时候，js是能取到窗口的大小的，所以这里的「裁剪」指的是前端样式上的遮挡，只要在图片渲染之前（一般是进场loading的时候），我们将图片裁剪成当前设备对应的比例，问题不就解决了O(∩_∩)O~
Talk is cheap，直接上码：

var pic_w = 640;
var pic_h = 960;
var pic_wh_radio = pic_w / pic_h;
var device_w = $(window).width();
var device_h = $(window).height();
var device_wh_radio = device_w / device_h;

if(pic_wh_radio < device_wh_radio) {
    //宽太大，横向剪裁
    var need_w = Math.floor(device_h * pic_wh_radio);
    var offset_x = (device_w - need_w) / 2;
}
else if (pic_wh_radio < device_wh_radio) {
    //高太大，纵向剪裁
    ...
    var offset_y = ;
}

当然前提都是，背景图是相对body绝对定位的，算出来的offset_x具体是要裁图片的左还是右，还是左右都一点，视业务而定，对页面整体的影响越小越好。而offset_y，如果页面允许滚动条，可以不裁，否则同理。Demo可以参考圣诞约约约这个页面（真的不是广告。。）

------------------------不华丽的分割线--------------------------

以上是目前想到的方案，如果你有更多的想法，欢迎讨论～ 最后，请期待后续H5游戏开发系列，如CSS3动画，图片格式等，哈哈。