阅读 1492

移动开发兼容问题整理笔记

背景

过去一年多一直在做移动开发方向的项目,遇到了不少兼容性的坑,虽然最后爬出来了,但是为了避免同事再次掉坑,于是一边开发,一边也整理总结了一份移动端兼容性问题记录笔记,记录当时用的解决方案或解决问题时参考的权威文章,方便团队知道如何解决相关兼容性问题及问题背后的一些原理,现在将这份笔记稍作整理记录在这里。

开始

1px边框

一般是采用伪元素模拟的方式

.scale{
  position: relative;
  border:none;
}
.scale:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
复制代码

其他border-shadow,svg的方式也可以,根据项目实际情况选择,如果项目移动端适配用的flexible.js做适配,那就很容易做到。

具体几种方法详见:

关于移动端开发1px边框的一些理解及解决办法


点透问题

也来说说touch事件与点击穿透问题

一般懒人处理点透的方案都是引用fastclick,但是这个插件在某些场景下也有坑,一般要用它的话最好fork下源码然后修改一下,开发中遇到了以下2个坑:

1.安卓某些版本触发两次点击问题

Fastclick 导致click事件触发两次的问题

2.光标移位问题(这个问题排查了了好久才找到是fastclick的问题)

FastClick 填坑及源码解析


键盘遮挡输入框问题


这种输入在页面下方的布局也很常见,一般评论,留言,聊天都会使用这种布局,但是有时候弹起的键盘会盖住输入框,解决方案如下:

移动web页面,input获取焦点弹出系统虚拟键盘时,挡住input,求解决方案?


浮层上进行滑动,浮层下面的页面也跟着滚动

web移动端浮层滚动阻止window窗体滚动JS/CSS处理


安卓border-radius:50%不圆

使用了rem做适配后使用具体值设定border-radius,不要用百分比,否则有些安卓机上50%是个椭圆形。


安卓元素无法垂直居中问题

移动端android上line-height不居中的问题

这个我line-height居中,定位+transform,flex居中都试过,但都是偏上一些,不能垂直居中,最后还是用的zoom解决。


安卓部分版本input里的placeholder位置偏上

把input的line-height设为normal

input{
    line-height:normal
};复制代码

详细原理看stackoverflow上的这个回答:

HTML5 placeholder css padding


ios的body设置overflow:hidden后仍然可以滚动

一般在所有元素最外层再包一个大盒子.wrapper

.wrapper{
    position:relative;
    overflow:hidden;
}复制代码

stackoverflow上有好几种处理方法,可以顺便参考下:

Does overflow:hidden applied to <body> work on iPhone Safari?


ios fixed布局问题


这种输入框在固定在最上面布局很常见,但是用ios下当键盘弹起时fixed会失效。解决办法在下面文章里:

Web移动端Fixed布局的解决方案

一句话解释就是把页面滚动改为容器内滚动。


ios日期转换NAN问题

JavaScript中的Date对象在Safari与IOS中的“大坑”


ios滚动卡顿

滚动的容器加上这个

-webkit-overflow-scrolling: touch;
复制代码


ios滚动时动画停止

移动端滚动懒人推荐使用better-scroll,很好的插件

ios滚动动画停止的原因及其他解决办法:CSS3 动画在 iOS 上为什么会因为页面滚动也停止?


长按闪退

element {
    -webkit-touch-callout:none;
}
复制代码


禁止数字识别为电话号码

<meta name = "format-detection" content = "telephone=no">
复制代码


取消点击高亮

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);复制代码


手机旋转时禁止字体大小自动变化

 -webkit-text-size-adjust:100%;
复制代码


transition闪屏

.box { 
     -webkit-transform-style: preserve-3d; 
     -webkit-backface-visibility: hidden; 
     -webkit-perspective: 1000; 
} 复制代码


CSS3动画卡顿

尽量使用transform,避免使用height,width,margin,padding等。可以开启GPU硬件加速,但用硬件加速的时候也要注意,因为这个也有坑,不合理使用反而会让应用越来越卡!

CSS3硬件加速也有坑!!!


微信,手Q,QQ浏览器内的坑

qq浏览器X5内核坑大全


关注下面的标签,发现更多相似文章
评论