1、准备条件
1.1、设计师应该注意的地方
移动端最大的问题在于多种设备，多种平台，多种尺寸，当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计)，如果没有做过类似的移动端的设计，UI设计师和前端工程师肯定会纠结的。那么多手机屏幕尺寸，设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有很多2K分辨率的手机屏幕了，设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。先看一下市面上主流的手机尺寸：
我们在H5开发初期的时候，进行了各种尺寸的设计稿尝试，比如1倍的(320X480)、2倍的(640X1136)、3倍的(1242X2280)像素。最终得出的试验结果是。H5的设计稿一般设计为640X1136即可。即iphone 5s的物理像素(也即是5、5c以及将要发布的5se的物理像素，这一系列手机在iphone的占有率中是最高的)， 既满足了retina用户的显示需求，又能降低2G、3G用户加载图片需要的带宽。不过，你若有更高质量的追求，750*1334像素的设计稿也是一个不错的选择。
1.2、开发者应该注意的地方
不管在手机浏览器还是在微信客户端或者腾讯新闻客户端开发，内容大都不能全屏显示的。在底部或者顶部多多少少会有一个状态栏的占位，并不能展示手机的全部尺寸。一些手机浏览器底部会有导航，也有些会在顶部和底部都有占位，比如导航栏、状态栏。顶部的占位会把内容往下挤，底部的占位会把内容遮盖住。所以，我们在进行H5页面内容规划布局设计的时候，不能把重要内容放在太偏下或者太偏上的位置，否则前端布局时可能出现内容显示不全的情况。如果有滑动的交互操作，用户很有可能触发浏览器页面的滑动，导致较差的用户体验。
下图为腾讯新闻客户端和微信内置浏览器的占位高度，在640×1136(iphone5s)上他们的高度是一样的。如果你的页面高度超过1008px，页面就会出现滚动功能。
除去顶部大概130px的像素，底部大概150左右的像素，内容的安全高度大概有850左右，怎么布局页面，具体要看你的项目主要在什么环境上运行。
2、开始动手
2.1、页面流程
当我们在玩一个简单的H5游戏的时候，其流程通常会包含以下步骤：
1、 出现一个载入进度条，载入一些必须的图片、音频、字体等文件;
2、 显示主菜单，提示用户开始游戏;
3、 进入游戏主逻辑。在游戏过程中，当用户胜利或者失败，或是触发了某个按钮或者按键时，游戏会退出，显示结果页面。
4、用户分享游戏或者关闭游戏。
也就是说一个完整的H5游戏，至少有3个页面不可或缺，就是加载页、游戏页、结果页。由此也可以延伸出多个页面，比如开始页，分享页等。
2.2、资源的加载
区别于普通的网页的开发，H5游戏需要大量的视觉听觉素材，并且用户的网络的带宽有限。当你使用了很多的图片、声音、视频以及媒体文件的时候，用户会花费一些时间等待浏览器从服务器下载。 如果在编写游戏时， 你不把它放在心上，不提前加载而直接使用， 等你开发完游戏到真实的用户场景上运行时，你就会碰到问题多多，因为图片和声音文件是异步加载的，你的JavaScript代码会在资源全部加载完成前执行。这常常导致一个红叉的图片在上蹿下跳，声音效果在需要时不播放或者延迟很久冒出来一个声音. 好的开发习惯是创建一个预加载器，延后脚本代码的执行，直到所有的资源都下载完毕为止，这个时候才放出游戏的开始按钮，让用户参与游戏。
我们经常会看到，一些站点在首次进入的时候会先显示一个进度条，等资源加载完毕后再呈现页面，进度条大概像这样：
以图片的加载为例，大致的代码应该是这样：
至于预加载的技术原理，其实也相当简单，就是维护一个资源列表，挨个去加载列表中的资源，然后在每个资源加载完成的回调函数中更新进度即可。