说明:本文讨论的浏览器窗口大小是指在微信 App 里的浏览器大小,首先要减去标题栏的高度。

减去标题栏后的窗口大小

机型 宽度 高度 宽高比例
iPhone 5 320 504 1 : 1.575
iPhone 6/7/8 375 603 1 : 1.608
iPhone 6/7/8 Plus 414 672 1 : 1.623
iPhone X 375 724 1 : 1.930
iPhone XR 414 808 1 : 1.952
iPhone XS Max 414 808 1 : 1.952

设计稿的大小讨论

考虑到 DPR(iPhone 一般为 2 或 3),为了保证图片足够清晰且压缩率(大小)合理,设计稿建议采用 320px * 2 = 640px 的宽度,高度建议为 640px * 1.952 = 1250px,不过需要注意的是,重要内容应该都放在 640px * 1.575 = 1008px 地方以上,否则在小屏手机上看不到。

按 320px 的宽度来转化:

机型 宽度 比例 高度
iPhone 5 320 1.575 504
iPhone 6/7/8 320 1.608 514.56
iPhone 6/7/8 Plus 320 1.623 519.36
iPhone X 320 1.93 617.6
iPhone XR/XS Max 320 1.952 624.64

转成 640px,可以看到高度:

机型 宽度 比例 高度
iPhone 5 640 1.575 1008
iPhone 6/7/8 640 1.608 1029.12
iPhone 6/7/8 Plus 640 1.623 1038.72
iPhone X 640 1.93 1235.2
iPhone XR/XS Max 640 1.952 1249.28

72111-vgfgdirkiu.png

关于业界推荐设计稿尺寸的问题

业界推荐的设计稿尺寸一般为 640 x 1136,其中,在 812 处设置一条安全线(参考线),将重要的内容布局在这条安全线之上。

iPhone 5 的屏幕像素是 320 x 568,也是高宽比最低的,所以用这个比例去设计肯定可以全部呈现,这就是所谓业界推荐的设计稿尺寸的由来。

但根据笔者的亲自实践来看,上面这个说法并不适用于微信的浏览器设计(因为这里的 1136 包含了浏览器顶部和系统状态栏),或者说 1136 这个高度并不适用于设计师。

对于设计师来说,并不关注微信浏览器顶部和系统状态栏,只关心内容本身,所以这个数据就没有参考价值了。

如果设计师按照这个比例去做图,仅针对 iPhone 设备而言,812 固然安全了,但放在 iPhone X 及之后的屏幕宽高比在 1:2 左右的机型上来看,底部将会有 1/3 的空余空间。

总结

综上,如果要追求完美,设计稿还是要出两份:

  • 适配老机型 640 x 1040,安全高度为 1000
  • 适配新机型 640 x 1250,安全高度为 1200

如果只出一份,我的建议是 640 x 1250,然后安全高度为 1000,也就是说底部有 250 的空间需要设计师去发挥了~