2024年3月16日发(作者：中柏电脑为什么骂声一片)
iH5中级教程：多机型自适应篇，适应多种播放设备
平常我们再做一些h5的微信小游戏的时候，会遇到一件非常烦恼的事情。那就是我
们不同的手机打开的时候，有些手机打开下方会有白条，有些手机会显示不完全。那么这
种情况我们应该怎么办呢？今天给大家介绍一种完美适配的方法，那就是利用iH5做H5
作品后做自适应。
第一步：打开编辑器
第二步：新建长款手机移动设备
1.选中舞台，点击工具栏下的手机移动设备工具，新建移动设备。
2.右键重命名移动设备为长款手机，为了测试的时候方便辨认，设置了一个背景色。
3.长款手机一般是屏幕比较长的手机，安卓的一般是1008px的高度，也是苹果5s的
高度，如果想要适配更长的手机，一般苹果6的高度是1030px，苹果6P的高度是1040px。
4.我们在上面添加一个文本 “长款手机”，标注一下这个移动设备。
第三步：新建短款手机设备
1.方法同步骤二，新建一个移动设备
添加一个文本“短款手机”。
，重命名为短款手机，并为其设置背景颜色和
2.高度设置为832px。
第四步：新建pad横屏设备
1.方法同步骤2，新建移动设备，重命名为pad横屏，并为其设置背景颜色和添加一
个文本 “pad横屏”。
2.高度设置为（420）。Ipad mini 横置时，通过浏览器直接查看案例时的高度。
第五步：新建PC设备
1.选中舞台，点击工具栏下的PC设备工具，选择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、原来目标对象指向舞台的事件要改成指向移动设备。
发布者：admin，转转请注明出处：http://www.yc00.com/num/1710586216a1782032.html
评论列表（0条）