移动前端的一些坑和解决方法（外观表现）

最新推荐文章于 2022-08-24 11:24:43 发布

X月亮代表我的心

最新推荐文章于 2022-08-24 11:24:43 发布

阅读量700

点赞数

分类专栏： CSS3

8 篇文章 0 订阅

订阅专栏

在github上看到一个专门收集这些问题的，对于移动方面由于自己做得不多，而且由于测试环境所限，无法重现具体bug，下面来一起看看这些坑以及是怎么解决，学习多一些移动前端的知识，以后做的时候就要所注意。

第一篇是外观表现：

问题描述	环境与频率	解决方法
border-radius百分比失效	Android2.3.x	设置一个较大值如border-radius:9999px
placeholder属性设置的文字向上偏移的厉害	Android4.x部分机型	line-height:normal
iOS5及以后版本都支持. iOS4及以下版本不支持，会当做static处理.	Android 2.1 及以下版本不支持. Android 2.2 滚动过程中不保持fixed的位置，滚动完成后回到fixed的位置. Android 2.3 支持fixed, 但是要求页面禁止缩放. Android 3+ 支持fixed.
如果一个应用了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系统也一致选择默认的无衬线字体。

关注