zhilizhili-ui 2013-2015移动端设备分析不完全报告

本文持续更新 希望大家把想要了解的 我来写出来

2016.1.13 webapp 调试
2016.1.19 小米设备调查表

有什么发展的事吗

人们总是要换手机的 一般来说3年就有可能换手机 2016就换了 所以 向前推3年 我们限定一个最小值2013年
而且就算兼容 也只会兼容主流手机 好的 我们先从2013年开始吧

苹果默认已最新系统为准

微信内置浏览器 uc浏览器 qq浏览器已最新为标准

感谢友盟指数提供数据支持

2013年

中国人民共和国工业和信息化部 发布了2013年手机行业发展情况回顾与展望

从中我们可以发现2013年末 4g才正式在中国挂牌 2013年手机还是3g为主

ios阵营

主要有ios6 ios7

ios7在9月发布

苹果

2013年上半年 苹果手持设备主要还是iphone4s iphone5
之前还是2g使用者居多
秋季发布会后 iphone5s iphone5c出现 这是很重要的 因为移动4g 很快可以用
ipad ipad mini 也开始稳定下来 成为大家生活用品

android阵营

主要有android4.1 android4.2 android4.4

android4.4在11月发布

android4.4对于web开发者的意义是巨大的 android正式使用chromium替换之前不是很标准的webview
根据我的测算 大约是chromium33水平

国内则不太乐观

上半年
miui v4 基于 android4.0
flyme 2.0 基于 android4.1
emui ? 基于 android4.1

下半年
miui v4 可能有基于android4.1
flyme 3.0 基于 android4.2
emui ? 基于 android4.1

总体来说基本上都是基于android4.1的

google

nexus4 主要 基于 android4.2
不过后来android4.4 9月发布 nexus4 就到了android4.4

nexus7 平板

三星

Galaxy S3 4g android4.1
Galaxy note 2
Galaxy S4 4g android4.2
Galaxy note 3
Galaxy Gear

小米

小米2
小米2s

魅族

mx2

2014年

ios阵营
ios7.0

苹果
iphone5s iphone6
ipad 无突破

苹果正式向大屏方向开始进军 屏幕宽度不再是320 这是很值得注意的

android阵营

2014年6月2日 Google 发布 Android 4.4.3（Kitkat）

从这一版开始web端开始不再是问题

Android 5.0 开始出现 material design发布

国内

上半年
miui v4 可能有基于android4.1
flyme 3.0 基于 android4.2
emui ?

下半年
miui v4 可能有基于android4.1
flyme 4.0 基于 android4.4
emui ?

国内大规模进入android4.4时代就是2014年下半年

google

nexus 5

一开始搭载android4.4

三星

Galaxy S4
Galaxy S5

注意一开始搭载的是android4.4.2 这和android4.4.3有差距

小米

小米3
小米4

注意小米4开始 正式使用android4.4.4

魅族

mx3
mx4

2014-2015中国Android手机市场研究报告

如果说2014有什么惊喜的话 就是smartisanos开始1.0版 这是基于android4.4.4
smartisanos 从一开始就给开发者带来良好的环境

从2014年开始 我们可以得到更具体分析

2014年上半年 android4.1 android4.2稳定 android2.3开始减少
到了下半年 得益于国内各大开发组 android4.4开始出现 到了年底 android彻底进入4.x时代

从设备分布来看 国内对于三星 小米的购买度很高

2015

ios 阵营

ios8 ios9

苹果

iphone6 iphone6s

这一年苹果除了发布iphone6s 还有就是ipad pro
ipad pro由于加入触摸笔支持 web可能可以得到很多不错的想法

android

android5.1 发布
android6.0 发布

国内

上半年
miui v5 可能有基于android4.4
flyme 4.0 基于 android5.0
emui 3.1 基于 android5.1

下半年
miui v6 可能有基于android5.0
flyme 5.0 基于 android5.1
emui 4 基于 android6

2015年几乎就是android4.x天下 android4.4一直很稳定 不过从2015年10月开始 android5.0开始出现
android5.0 带来了chromium40

2015年开始 由于各大手机厂商开始使用同质化硬件 不必说了 这时期的手机性能都已达到稳定奔跑webview级别

有没有什么要注意的

大概有什么常见的设备

小米

媒体查询解释

我们常说的移动设备的分辨率 截止2015年12月

如果一个一个兼容 辞职吧

通常我们会去设置

<meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

关于viewport解释移动端Web系列3 -- viewport

device-width 查询的是设备像素
iphone4 的分辨率为 640×960

    屏幕大小为 320×480
    

device-aspect-ratio 即设备宽高比 2/3
device-pixel-ratio 为2
resolution

iphone6plus 的分辨率为 1242x2208

        屏幕大小为 414x736
        

device-aspect-ratio 即设备宽高比 9/16? 实际上有些问题 到底会是多少
device-pixel-ratio 为3

知乎有一个问题可以看看iPhone 6 Plus的逻辑分辨率为什么是414x736？

google facebook厂商都有自己的研发团队 对市面上常见手机做统计

google 设计团队对于设计机型的指导

浏览器版本问题

ios

ios8 safari为最低值

根据caniuse指出 我们可以发现ios8 safari autofocus还没有
并且我们可以看出ios9依旧没有

ios各个版本之间也会有不同

android

android就更乱了 不知道怎么说呢 总之 确保在微信上正常跑就好了

目前可以确定的
微信 大概有chromium20能力
qq6.1 大约有chromium37能力

如果你们想使用webcomponent 微信是无法使用的

如何和设计师解决设计问题

iPhone 6 / 6 Plus 出现后，如何改进工作流以实现一份设计稿支持多个尺寸？知乎
iOS和Android 界面设计尺寸规范链接
移动界面设计尺寸文章汇总链接

设计是这样设计的 不过最好还是用vw rem这样的单位 做响应式方便点

响应式设计还有一个问题 1x 2x 3x
还有就是屏幕大小 这些在处理图片时都会碰到这些问题
srcset picture都是为了解决这一问题而存在的 svg img会不会更好

ios8开始支持webgl android则要到33才支持正式webgl 之前18-32都是实验

也就是说如果想要更好的体验 必须使用ios8 或者 android4.4.4这版系统才行

webapp

webapp调试方法

微信浏览器webview调试
safari chrome如何调试webapp
移动端前端开发调试

一些重要的问题

[webkit移动开发笔记]之禁止触发系统默认菜单