如何制作关于测试的H5页面

HTML5页面制作工具，大体分为两类：基于HTML5的网站工具和手机APP工具（当然还有一些其他的，例如基于微信公众号的等，下面也会介绍）。

先总的说一下个人感受

1.基于HTML5的工具网站：功能较强大，单页面的 *** 作性较强，可完成各种页面交互效果；但是某些时候会有 *** 作“失灵”的现象，如上传图片失败，点击保存失败，生成失败等。原因你懂得~

2.手机工具APP：相比起工具网站来讲，显得比较顺手，有大量模板套用，制作简单快捷；但是拘泥于现有的模板，使得单页面不会有较大的可 *** 作空间，从而无法实现DIY交互效果。

下面展开说下每个使用过的工具吧

基于HTML5的工具网站：

【兔展】

优点：页面DIY程度较高，动效实现起来也简易方便，可制作比较任性的H5页面。

缺点：屏幕界面大小不可调节，上传的图会比例失调；生成后到各尺寸屏上页面会存在拉伸现象。

（此图意在说明上传的图片的尺寸都是网站自己默认的一个尺寸，不是图片本身的尺寸，不利于使用者调整）

【MAKA.im】 可以具体编辑，单页 *** 作性较高，有新手（有模板）和高阶（无模板）两种编辑模式；翻页效果比兔展多，模板也更强大一些。

【居高互动刊】

优点：最简单易上手的工具之一，根据提示一步一步的添加，共4步，最后生成微杂志。相比其他在线工具，较稳定。

缺点：目前没试通制作单页上的交互效果，没找到开启pro功能的入口。

【ANIMATRON】

优点：像flash的在线版，功能强大，可以创建HTML5动画。适合有动画基础的人做演示制作。

缺点：需要动画制作基础；工作界面响应时间长；貌似只能分享到twitter、Facebook、google+、tumblr？

【iSpring 7】

噱头是PPT转HTML5工具，完美与PPT兼容，可制作Html5移动课件。

不过，目前我只能连着VPN再用Safari才能打开网站链接。

12款很棒的浏览器兼容性测试工具推荐：

1、Spoon Browser Sandbox

点击需要测试的浏览器环境，安装插件就可以进行测试了。帮助测试网页在Safari、Chrome、Firefox和Opera浏览器中是否正常，IE以前也有的，网站上说应微软的要求去掉了。

2、Superpreview

这是为微软自己发布的跨浏览器测试工具，可以同时查看网页在多个浏览器的呈现情况，对页面排版进行直观的比较。

3、IETester

专门用于测试网页在IE浏览器各个版本中兼容性的工具，版本包含IE5.5至IE9的各个版本，很不错的一款工具，推荐。

4、BrowserShots

是一款免费的跨浏览器测试工具，捕捉网站在不同浏览器中的截图。这是最有名，也是最古老的浏览器兼容性测试工具。

5、Multiple IEs

这款工具同样用于测试网页在IE浏览器各个版本的兼容性。

6、IE netrenderer

Netrenderer 也是用于检查网站在IE浏览器中的呈现情况，包括各个常用版本的检测。

7、Viewlike

是一款新推出的工具，帮助检查浏览器在不同分辨率下得呈现情况。

8、BrowserSeal

这款工具的两个主要特色是独立的浏览器支持和带有自动化脚本的命令行界面。

9、Browsera

是一个可测试网站的跨浏览器布局的工具，会看到网站上存在的兼容性错误。

10、WebDevLab

这款工具专门用于测试网站在苹果Safari浏览器中是什么样子的

11、Litmus

这个工具可以帮助检查网站在多个浏览器中的呈现情况，跟踪Bug并创建报告。

12、Browsercam

这款工具是要付费的，可以帮助检查 Javascript 和 DHTML，提供不同的测试环境平台。

---