本文持续更新 希望大家把想要了解的 我来写出来
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的
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年下半年
nexus 5
一开始搭载android4.4
三星
Galaxy S4
Galaxy S5
注意一开始搭载的是android4.4.2 这和android4.4.3有差距
小米
小米3
小米4
注意小米4开始 正式使用android4.4.4
魅族
mx3
mx4
如果说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厂商都有自己的研发团队 对市面上常见手机做统计
浏览器版本问题
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
移动端前端开发调试