【原】为何选择iPhone5的分辨率做为H5视觉稿尺寸

【20160105更新：能够用iPhone6分辨率为视觉稿尺寸啦】

又是一年的520网络情人节，深圳这边却下了大雨，这雨只能是单身汉的泪，而对于我来讲这一天具备特别的意义，一来怀念父亲，二来对我这种结婚人士来讲还可勉强表达对老婆的爱，so，本文的图片宽均以520像素来设计。

回到主题，在微信朋友圈常常看到的H5页面(滑屏页面)，除了炫酷的动画效果以外，细心的你会发现有些H5页面在不一样的移动设备上适配效果良好，页面的元素适配你的设备屏幕，而且展现完整的信息，以下图，页面在iPhone 6和iPhone 4不一样屏幕分辨率下，内容自动适配，在iPhone4窄屏手机中男主角的下半身隐藏在屏幕外，但指引的信息完整展示在页面中。

那么，响应式设计是否须要设计师提供多套的设计稿呢？例如宽屏手机(iPhone6)、窄屏手机(iPhone4)各自一套。

相信不少人的回答是否认的，由于这会增长设计和前端的工做量，实际工做中设计H5页面，有不少专业的设计师会提供2套甚至是3套的尺寸给前端的同事，如下截图来自suco的《移动端品牌营销要素-快 简 准》。

这样的好处很明显，减小了前端的构建成本和沟通成本，在此向设计师们表示敬礼。

视觉稿无论设计1套仍是2套以上，总以其中一个尺寸为准开始设计，从转到移动开发以来，听到有很多同事在问：H5视觉稿是以什么尺寸来设计？

在2年前，咱们拿到的视觉稿大都是iPhone4的分辨率960x640的尺寸，现在iPhone6/6+出来了，一代版本一代王，想一想应该选择iPhone6，然而本文的观点恰恰选择iPhone5，为何呢，简单说明下个人看法。

如下分析数据取自4月份的友盟指数，有很大的参考价值。

ios设备的市场占比，包含了主要型号的分辨率和市场占比，另外对设备高度和宽度简单作了计算，获得如下数据：

• 5占ios市场比例为47.4%，ios中占比最高
• 4占ios市场比例为23.10%，不可忽视的窄屏手机
• 五、六、6+共占据市场比例61.9%
• 5到6及6+的分辨率基本是等比例增大的，高与宽比约为178:100

下图为android设备的市场占比：

• 设备高与宽比约为178:100的占据市场比例为64.4%

从以上2则数据能够看出，不轮是ios仍是android系统，设备高宽比178：100的占据市场比例超过60%，不难看出这个比例的设备是目前市场的主流，从最多用户数的设备进行设计，向前向后兼容，那么iPhone5的高大上及市场占比能够做为目前H5视觉稿的首选。

写到这里，文章也算结尾了，再抛出文章开头一个问题：是否须要视觉设计师设计多套的视觉稿呢？具体要2套仍是3+套？

敬请期待下期的分享~

祝你们520快乐~