结论

移动端设备屏幕尺寸非常多,为了适配不同设备,推荐使用iPhoneX的屏幕比例作为基准,尺寸:750x1624px,同时需保证重要内容在安全区域内,尺寸大小:646x1206px(iphone6的尺寸)。视频的尺寸亦是如此。

原因:

一个HTML5页面从提出到完成上线的流程:

1、需求方、设计人员、H5实现人员三方共同讨论实现方案

2、设计人员出设计图

3、H5人员按设计图出H5页面

4、需求方评估已实现的H5页面后给予反馈

5、设计人员与H5人员根据反馈进行适当调整

6、发布推广

一、手机屏宽度高度不一

目前市场上全面屏手机逐渐普及,非全面屏也不在少数,为了最大程度的兼容各种尺寸的手机,设计H5页面应该制定一个最优化的尺寸(都完美适应是不大可能的),

最好的效果肯定是设计多套不同的效果针对不同的屏幕尺寸,但这样需要大量的人力与时间,而且维护成本太高,不符合大部分团队的实际情况。

典型的手机屏尺寸如:

导航栏+iphone状态栏高度: 64px

iphone4

屏幕总宽度: 320px

屏幕总高度: 480px

微信网页可视高度: 416px

推荐设计稿大小x2:

640*832(可忽略该尺寸,手机out了)

iphone5

屏幕总宽度: 320px

屏幕总高度: 568px

微信网页可视高度: 504px

推荐设计稿大小x2:

640*1008(也差不多out了)

iphone6

屏幕总宽度: 375px

屏幕总高度: 667px

微信内网页可视高度: 603px

推荐设计稿大小x2:

750*1206

iphone6 plus

屏幕总宽度: 414px

屏幕总高度: 736px

微信网页可视高度: 672px

推荐设计稿大小x2:

750*1344

samsung galaxy note3 (三丧手机开发者的黑洞。。)

导航栏+Android状态栏高度: 73px

屏幕总宽度: 360px

屏幕总高度: 640px

微信网页可视高度: 567px

仅iphone就4个尺寸了,更别说Android阵营的手机了

特别注意:“推荐设计稿”大小是以微信可视区为基准

需要脑补显示效果的“可能需要适应的屏”

二、两种效果图排列,以及对应的解决方案

★★★ 1、效果图水平居中排列设计(较容易实现自适应)

由于是水平居中,则两边可以用纯色平铺,不管屏有多宽,都可以以纯色填充,这就是最最容易的自适应了。

★★★ 2、效果图非居中排列设计(相对较难实现自适应)

由于是非水平居中,内容可能放置在屏幕中任意位置,

H5要实现这样的设计图并且要适应各种屏幕下各内容的位置、大小比例的正常,就需要计算每个内容元素的位置、大小比例等

★★★ 总结:移动端设备屏幕尺寸非常多,为了适配不同设备,推荐使用iPhoneX的屏幕比例作为基准,尺寸:750x1624px,同时需保证重要内容在安全区域内,尺寸大小:646x1206px(iphone6的尺寸)。视频的尺寸亦是如此。