安卓和苹果手机Web前端一些兼容坑浅析
尽管现在有很多不同品牌的手机，但就系统而言大体仍是安卓和苹果两大阵营，今天我们就来一起看看这两大系统里有哪些网页前端坑，并附上解决方法，多学习一些移动前端兼容知识，以后写代码的时候就能避开这些坑。
样式表现
| 问题描述 | 环境与频率 | 解决方法 |
|---|---|---|
| border-radius百分比失效 | Android2.3.x | 设置一个较大值如border-radius:9999px |
| placeholder属性设置的文字向上偏移的厉害 | Android4.x部分机型 | line-height:normal |
| iOS5及以后版本都支持. iOS4及以下版本不支持，会当做static处理. |
| |
| 如果一个应用了css3 transform的元素里面包含fixed定位的元素，在webkit核心的浏览器下，该fixed定位的元素会失效，其实际定位效果类似绝对定位，会跟着滚动条的滚动而滚动！ | ios | 避免在应用了css3 transform的元素内部嵌套fixed定位的元素。 |
| webkit上的input,button,及select的默认样式可以通过以下代码禁用，然后自定义。 | -webkit-appearance:none; | |
| video标签的父元素(祖辈元素)设置transform样式后，标签会脱离文档流 | 部分android机型 | 避免使用transform，如果需要设置位移，可使用绝对定位加top/left代替 |
| body设置100%高度后，在移动浏览器里面可能会被底部的导航栏挡住: | 各移动浏览器经常出现 | document.documentElement.style.height = window.innerHeight + 'px' |
字体设置
iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。·
中文字体设置为华文黑体STHeiTi。
需要说明的是，华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5484?viewlocale=en_US)，
但系统会自动将华文黑体STHeiTi兼容命中系统默认中文字体黑体-简或黑体-繁：
Heiti SC Light 黑体-简 细体
Heiti SC Medium 黑体-简 中黑
Heiti TC Light 黑体-繁 细体
Heiti TC Medium 黑体-繁 中黑
原生Android下中文字体与英文字体都选择默认的无衬线字体。
4.0之前版本英文字体原生Android使用的是Droid Sans，中文字体原生Android会命中Droid Sans Fallback。
4.0+ 中英文字体都会使用原生Android新的Roboto字体。
其他第三方Android系统也一致选择默认的无衬线字体。
