在github上看到一个专门收集这些问题的,对于移动方面由于自己做得不多,而且由于测试环境所限,无法重现具体bug,下面来一起看看这些坑以及是怎么解决,学习多一些移动前端的知识,以后做的时候就要所注意。
第一篇是外观表现:
问题描述 | 环境与频率 | 解决方法 |
---|---|---|
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' |
字体设置建议:
body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; }
字体设置
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系统也一致选择默认的无衬线字体。