适配各种移动设备分辨率的思路和解决方法

1. 让H5页面适配移动设备全家
微信支付设计中心
peunzhang 2015/10/16

2. • 大数据的启发和思考
• 3种适配模式
• pageResponse.js
目录

3. 大数据的启发和思考

4. 使用wifi联网超过70%，4G用户超过20%
android ios
友盟指数8月份
网络环境的提升给H5带来更多的挑战

5. 为什么大屏手机是趋势
手机容易携带
大部分女生都喜欢
大面积散热
厂商拼硬件
手机厂商取代PC主流
提升电池在机身中所占比例
众望所归
方便阅读

6. 设备名 分辨率 设备高宽比
iPhone6 1334*750 1 78/100
iPhone6 Plus 2208*1242 1 78/100
iPhone5 1136*640 1 78/100
iPhone4 960*640 1 50/100
android 1280*720 1 78/100
android 1920*1080 1 78/100
android 960*540 1 78/100
android 854*480 1 78/100
android 800*480 1 67/100
市场占比前9的移动设备(友盟指数8月份)

7. 设备高宽比178：100的设备占据市场比例超过65%

8. 178 ： 100的视觉稿等比缩放页面后可适配65%以上的设备
那么选择哪个分辨率为视觉稿尺寸？

9. 但为什么设计师们还是选择iPhone的分辨率为视觉稿尺寸？

10. 选择iPhone的可能原因
iPhone4高清分辨率的带动
用户有钱
性能高
设计资源多
别人都在用
页面体验好
用户高端
用户多

11. 选择iPhone哪个分辨率为基准

12. iPhone5占ios市场比例为33.1%
友盟指数

13. iPhone 5的视觉稿在比它高的分辨率设备下图片失真？
iPhone 5 iPhone 6P
肉眼很难看出它们的差异，对产品的体验几乎没有影响

14. 选择iPhone5的分辨率作为视觉稿尺寸
适配65%以上的移动设备
另外的35%怎么办？

15. 一套视觉稿真的够吗

16. 滑屏页面在窄屏分辨率下的重要信息被隐藏
调整后

17. 滑屏页面在不同分辨率下的内容衔接不上
调整后

18. 横屏下页面显示错乱
调整后

19. 元素百分比+rem字体布局，字体与其它元素难以控制等比缩放

20. media+rem字体的适配难以兼顾所有的机型

21. width=视觉稿宽度，target-densitydpi=device-dpi
android 2.3.5 存在兼容问题

22. 你们的行为实在欺人太甚，你们若是感觉有实力跟我玩，良辰不介意奉陪到底
一套视觉稿适配移动设备全家，让烦恼通通见鬼去

23. 3种适配模式

24. 随着浏览器窗口放大而放大的页面
auto模式
保持页面的宽高比，调整页面的宽度，使页面宽度完全包含在浏览器窗口中

25. auto模式
真实案例 – 联通送话费

26. auto模式
 评分 ☆ ☆ ☆ ☆☆
 一套高清视觉稿能适配所有的移动设备
 适合各种不以页面中心点缩放的页面

27. iPhone 6 iPhone 4Nokia lumia 520 模拟设备
保持页面的宽高比，调整页面的宽度或高度（较大者），使页面完全包含在设备窗口中
一张照片在不同手机相册中预览效果
contain模式

28. contain模式
真实案例 - 宝洁达人

29. contain模式
真实案例 - 京东的十大任性

30. contain模式
 推荐星数 ☆ ☆ ☆ ☆ ☆
 一套高清的视觉稿能适配所有的移动设备
 适合滑屏页面、单屏页面
 浏览器窗口可能出现空白，视觉稿背景使用纯色或可复制背景可解决此类问题

31. iPhone 6 iPhone 4
常见的手游界面
cover模式
保持页面的宽高比，调整页面的宽度或高度（较小者），使页面完全覆盖浏览器窗口

32. cover模式
真实案例 – 刻划锋芒

33. cover模式
真实案例 – 滴滴打车

34. cover模式
 推荐星数☆ ☆ ☆ ☆ ☆
 一套高清的视觉稿能适配所有的移动设备
 适合滑屏页面、单屏页面
 超出浏览器窗口的内容会被隐藏，视觉稿边缘无重要内容可使用此模式

35. 呵呵，我会让你们明白，良辰从不说空话
设计师和工程师的福利来了

36. pageResponse.js

37. 说明
自动适配移动端H5页面的插件
3种适配模式
auto
contain
cover
代码小于1k
零依赖
兼容
ios4+
android2.3+
winphone8+
无需设计多套视觉稿，无需苦逼做适配，保证页面完美体验

38. 原理
页面尺寸固定，使用transform:scale缩放页面浏览器窗口

39. 缩放系数——auto
页面缩放系数要么为设备宽度/页面宽度，要么为设备高度/页面高度

40. 页面缩放系数要么为设备宽度/页面宽度，要么为设备高度/页面高度
缩放系数——contain

41. 核心代码

42. 核心代码
兼容性良好，支持ios4+、android2.3+、winphone8+系统

43. 使用方法

44. 成功案例

45. 高效完成医院体验demo

46. 尽情使用吗
结合具体项目

47. 插件地址
https://github.com/peunzhang/pageResponse

48. 若是你们就此罢手，那良辰在此多谢了，他日，必有重谢

49. 让我们一起做好页面体验

50. 白树博客
http://peunzhang.cnblogs.com/