安卓和苹果手机Web前端一些兼容坑浅析

2019年06月08日 23:00:20益点益滴3570

尽管现在有很多不同品牌的手机,但就系统而言大体仍是安卓和苹果两大阵营,今天我们就来一起看看这两大系统里有哪些网页前端坑,并附上解决方法,多学习一些移动前端兼容知识,以后写代码的时候就能避开这些坑。

样式表现


问题描述环境与频率解决方法
border-radius百分比失效Android2.3.x设置一个较大值如border-radius:9999px
placeholder属性设置的文字向上偏移的厉害Android4.x部分机型line-height:normal
iOS5及以后版本都支持. iOS4及以下版本不支持,会当做static处理.
  1. Android 2.1 及以下版本不支持.

  2. Android 2.2 滚动过程中不保持fixed的位置,滚动完成后回到fixed的位置.

  3. Android 2.3 支持fixed, 但是要求页面禁止缩放.

  4. 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'


字体设置

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系统也一致选择默认的无衬线字体。

超赞,真给力!嗯,必须鼓励~

打赏1
账号:mxy310@163.com[复制]
账号:77940140[复制]