《iH5中级教程多机型自适应篇,适应多种播放设备.docx》由会员分享,可在线阅读,更多相关《iH5中级教程多机型自适应篇,适应多种播放设备.docx(3页珍藏版)》请在三一办公上搜索。
1、iH5中级教程多机型自适应篇,适应多种播放设备iH5中级教程:多机型自适应篇,适应多种播放设备 平常我们再做一些h5的微信小游戏的时候,会遇到一件非常烦恼的事情。那就是我们不同的手机打开的时候,有些手机打开下方会有白条,有些手机会显示不完全。那么这种情况我们应该怎么办呢?今天给大家介绍一种完美适配的方法,那就是利用iH5做H5作品后做自适应。 第一步:打开编辑器 第二步:新建长款手机移动设备 1.选中舞台,点击工具栏下的手机移动设备工具,新建移动设备。 2.右键重命名移动设备为长款手机,为了测试的时候方便辨认,设置了一个背景色。 3.长款手机一般是屏幕比较长的手机,安卓的一般是1008px的高
2、度,也是苹果5s的高度,如果想要适配更长的手机,一般苹果6的高度是1030px,苹果6P的高度是1040px。 4.我们在上面添加一个文本 “长款手机”,标注一下这个移动设备。 第三步:新建短款手机设备 1.方法同步骤二,新建一个移动设备颜色和添加一个文本“短款手机”。 ,重命名为短款手机,并为其设置背景2.高度设置为832px。 第四步:新建pad横屏设备 1.方法同步骤2,新建移动设备,重命名为pad横屏,并为其设置背景颜色和添加一个文本 “pad横屏”。 2.高度设置为。Ipad mini 横置时,通过浏览器直接查看案例时的高度。 第五步:新建PC设备 1.选中舞台,点击工具栏下的PC设
3、备工具,选择PC设备工具,新建PC设备。 2.设置设备1的高度为600px * 400px,这是普遍的pc端网页的大小。 3.为了方便辨认,设置背景颜色和添加中文字体“PC”。 第六步:测试设备。 1.拿不同的设备打开它我们就可以看到不同的效果啦!是不是很简单呢! 重点工具:移动设备、设备 知识点: 设备:可自定义宽高,适应不同电脑屏幕。 移动设备:手机案例,宽为640,添加移动设备可自定义高,适应不同手机屏幕。目前基本分为安卓系统和苹果系统,苹果系统高主要为832px,1008px,1030px,1040px,这些分别是4s、5s、6、6P的高度,安卓普遍高度在1008-1010之间。 TIPS: 1、 不同的设备的尺寸设置不一样。 2、 添加移动设备后,原来的内容要复制黏贴到移动设备下。 3、原来目标对象指向舞台的事件要改成指向移动设备。