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

时间 2019-11-05

标签移动开发兼容问题整理笔记栏目无线繁體版

原文原文链接

背景

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

开始

1px边框

通常是采用伪元素模拟的方式css

.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作适配，那就很容易作到。html

具体几种方法详见：html5

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

点透问题

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

通常懒人处理点透的方案都是引用fastclick，可是这个插件在某些场景下也有坑，通常要用它的话最好fork下源码而后修改一下，开发中遇到了如下2个坑：git

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

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

2.光标移位问题（这个问题排查了了很久才找到是fastclick的问题）segmentfault

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内核坑大全