微信H5整图背景适配方案

微信H5页面的全屏背景图，建议设计尺寸：800px*1440px，ratio=1.8

找了几部不同屏幕尺寸的手机，ratio表示长宽比：

1、iPhone6s:  750*1206，ratio=1.608，标题栏高度：128
2、华为1：     800*1430，ratio=1.788，标题栏高度：260
3、华为2：     784*1458，ratio=1.860，标题栏高度：142
4、华为3：     720*1352，ratio=1.878，标题栏高度：248
5、iPhoneX：750*1448，ratio=1.931，标题栏高度： 176

建议设计尺寸：
800*1440，ratio=1.8

若按此尺寸设计，body全屏背景：

body {
    background-image: url(configs/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

手机1会上下截掉5.33%；
手机2会上下截掉0.33%；
手机3会左右截掉1.66%；
手机4会左右截掉2.07%；
手机5会左右截掉3.38%；

结论

建议设计尺寸：800*1440，ratio=1.8
主视觉元素，放在padding 5%以内。