No Comments

H5 设计规范

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

PSD尺寸

背景区域 1000*1280
有效区域 640*1040
将 有效区域 置于 背景区域 正中间(入下图所示)

PSD格式

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

代码兼容

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

1. Annie引擎

  • 使用SHOW_ALL模式

  • 舞台 640*1040

    2. Egret引擎

  • 自己计算并适配

  • 舞台 1000*1280

    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)开发，按以上方案设计可以自动适配所有屏幕，保证不留白边

最后更新于 2019-02-27 16:29:31 并被添加「H5 设计规范」标签，已有 716 位童鞋阅读过。

相关文章

此处评论已关闭