以下方案经多次活动实践检验，可以适应iPad,iPhoneXR等所有屏幕

PSD尺寸

背景区域 10001280
有效区域 6401040
将 有效区域 置于 背景区域 正中间(入下图所示)

PSD格式

使用普通图层，因为导出图片时，会先合并图层，某些特殊效果会发生变化
需要动的部分 一定要单独图层
不要在psd里放微信顶栏和手机通知栏，只要设计H5页面即可
实例如下：
![1729441996.jpg][1]
[1]: https://blog.iguojin.com/usr/uploads/2018/08/4102376838.jpg

代码兼容

为兼容所有屏幕，程序按以下方案

1. Annie引擎

  • 使用SHOW_ALL模式
  • 舞台 640*1040

2. Egret引擎

  • 自己计算并适配
  • 舞台 1000*1280
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let game = this.stage
let con  = new egret.DisplayObjectContainer;
let h = window.innerHeight
let w = window.innerWidth
let s = w/h 
let stageW = 640
let stageH = 1040
if(s > 640/1040){
    // 屏幕较宽按高度适配
    game.scaleMode = egret.StageScaleMode.FIXED_HEIGHT;
    stageW = 1040*s
}else{
    // 屏幕较高按宽度适配
    game.scaleMode = egret.StageScaleMode.FIXED_WIDTH;
    stageH = 640/s
}
// 重置舞台大小
game.setContentSize(stageW,stageH)
// 元素放此容器
con.x = (stageW - 640) /2
con.y = (stageH - 1040) /2

背景

手机端屏幕尺寸经常不统一，会导致H5页面被遮挡显示不全等问题，早期华为系列手机经常有虚拟按键，导致他的有效区域比正常设备少很多。2017年苹果公司发布iPhoneX，完全没有按多年来已经被市场普遍接受的16:9屏幕制造，采用了大约2:1的异形刘海屏方案，极大提高了H5广告适配难度
我们主要使用基于canvas的H5引擎(egret或annie)开发，按以上方案设计可以自动适配所有屏幕，保证不留白边