web前端基础兼容问题

目的：

在web移动端项目开发中，经常会遇到各种各样的兼容性问题，但是之前都缺少总结，以前踩的坑可能还会再去踩一遍，所以这边做个总结，让之后来的新同事能够知道、了解我们之前踩的坑，并且之后开发中避免再入坑，提升开发效率；这边说一下平时常见的兼容问题；

问题：

问题一：IOS手机滚动卡顿

这个问题的原因是：列表滚动不是body滚动，而是div容器内的滚动（即：div有固定的宽高，然后该div内的内容超过了本身的高度，这时候设置overflow：auto，则里面的内容会滚动），但是这样的滚动在PC端调试还是android设备中都没有什么问题，但是在ios设备中就会出现卡顿，没有平时的滚动那么顺畅，也没有了滚动的惯性；这时候需要在该div上面加上一个css属性：

-webkit-overflow-scrolling: touch; //有回弹效果

问题二：active兼容处理即伪类 :active 失效

方法一：body添加ontouchstart

<body ontouchstart="">

方法二：js给 document 绑定 touchstart 或 touchend 事件

div {
<style>
   a {
     color:#000;
   }
   a:active {
      color:#fff;
    }
    </style>
    <a herf=foo >bar</a>
 <script>
    document.addEventListener('touchstart',function(){},false);
</script>
}

问题三：CSS3动画卡顿

问题：在平时写css3动画的时候，经常会移动、缩放等动画，但是在写移动动画的时候，很多同学的动画会卡顿；
原因：动画改变的属性是：width、left、margin，这些值的改变会造成dom的重排与重绘，有非常大的消耗；
原理： CSS的最终表现分为以下四步：Recalculate Style -> Layout -> Paint Setup and Paint -> Composite Layers按照中文的意思大致是查找并计算样式 -> 排布 -> 绘制 -> 组合层，由于transform是位于Composite Layers层，而width、left、margin等则是位于Layout层，在Layout层发生的改变必定导致Paint Setup and Paint -> Composite Layers，所以相对而言使用transform实现的动画效果肯定比left这些更加流畅。

问题四：动画定义3D启用硬件加速

当用-webkit-transform:translate3d(0,0,0)或-webkit-transform:translateZ(0)等属性时候，会让浏览器在渲染动画时从CPU转向GPU，因为我们设置的是0，所以实际效果是不会变，但是我们的动画流畅性会好很多；当然开启gpu硬件加速之后，对于设备的内存与消耗会更大；

Element {
  -webkit-transform:translate3d(0,0,0)
  transform: translate3d(0,0,0);
}

问题五：H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

问题六：盒子边框最低只能是1px

因为在部分设备中，小于1px的边框都会消失不见，只有1px及以上的时候才能正常显示，所以边框最小不能小于1px；

问题七：a标签或者button标签等，点击后会有蓝色边框；去掉难看的点击的高亮效果

* {
  outline: none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

问题八：移动端点击300ms延迟

300ms尚可接受，不过因为300ms产生的问题，我们必须要解决。300ms导致用户体验并不是很好，解决这个问题，我们一般在移动端用tap事件来取代click事件。

推荐两个js，一个是fastclick，一个是tap.js

问题九：移动端 HTML5 audio autoplay 失效问题

这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。

解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。

解决代码：

document.addEventListener('touchstart',function() {
  document.getElementsByTagName('audio')[0].play();
  document.getElementsByTagName('audio')[0].pause();
});

问题十：部分机型存在type为search的input，自带close按钮样式修改方法

有些机型的搜索input控件会自带close按钮（一个伪元素），而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为

#Search::-webkit-search-cancel-button{
  display:none; 
}

如果想使用原生close按钮，又想使其符合设计风格，可以对这个伪元素的样式进行修改。

问题十一：禁止ios和android用户选中文字；禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

div {
  -webkit-user-select:none；
  -webkit-touch-callout: none
}

问题十二：ios下取消input在输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

问题十三：IOS 中fixed定位缺陷

问题：当我们在移动端使用fixed定位时候，在ios手机中在上线滚动的时候，fixed定位的元素会闪动，这个暂时来看是没有很好的彻底解决的方案，只能是换种思路来- 解决；
解决不使用fixed，使用 absolute;然后页面中有列表的时候，采用div内滚动；

问题十四：页面返回时不执行对应js

点击浏览器的回退，有时候不会自动执行js，特别是在mobilesafari中。这与往返缓存(bfcache)有关系。

解决方法：window.onunload = function(){};

问题十五：input file类型的文件表单的兼容

ios 有拍照、录像、选取本地图片功能部分android只有选取本地图片功能 winphone不支持 input控件默认外观丑陋

问题十六：input 输入框中placeholder 属性兼容问题

在部分ios或者android中会上线布局中，甚至会被切；至今也没有找到很好的解决方案；另一种方案是：不使用这个属性，而是使用span标签定位上去，当输入框获得焦点的时候隐藏；

placeholder颜色问题

目前app中placeholder的颜色为#ccc;可通过以下方式统一设置app中的placeholder颜色以及其他样式，但是placeholder被切的问题目前没有更好的方法，目前的做法是缩小placeholder的字体大小；之前会有input中输入的文字也会被切，这个可以通过设置height=line-height来解决，但是该方法对placeholder被切没有效果； / WebKit browsers / ::-webkit-input-placeholder { color: #ccc; } / Mozilla Firefox 4 to 18 / :-moz-placeholder { color: #ccc; opacity: 1; } / Mozilla Firefox 19+ / ::-moz-placeholder { color: #ccc; opacity: 1; } / Internet Explorer 10+ / :-ms-input-placeholder { color: #ccc; }

问题十七：calc的兼容性处理

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。 Android浏览器目前仍然不支持calc，所以移动端不建议使用calc

问题十八：微信浏览器中跳转新网页：window.locaition.href 无效；

问题之前在微信浏览器中做支付时候遇到一个奇葩问题，那就是支付完成后，跳转到支付详情跳转失败；诡异的是：当前页面的标题已经是详情页面的标题，并且拷贝出来的链接也是详情页面的链接了，但是页面还是支付页面的样子，很久都没有找到原因与解决方案；最后换了一种方式解决了；
解决之后用js新建了一个a标签，然后把详情链接设置给src属性，然后使用js去促发a标签完成跳转，这样改了之后跳转的速度变得很快，并且没有出现之前的问题，算是解决了问题；

var nextPage = document.createElement("a");
     nextPage.setAttribute('href','http://www.baidu.com');
     nextPage.click();

问题十九：阻止移动端浏览器点击图片浏览行为的几种方法

引用于：https://www.cnblogs.com/joyho/articles/5017544.html

问题

在一些移动端浏览器上，如果点击图片，会产生一个浏览图片的行为。例如这样：

image

解决

1.在img元素上添加 onclick="return false"

2.图片用背景图的方式插入

3.使用js事件阻止默认行为的方法，这里需要注意哦！e.preventDefault();

注意：因为使用touchstart和touchmove事件的时候，假如页面顶部有个超级大的banner图，那么当横屏显示或者类似于ipad等屏幕宽度大于高度的情况下，整个banner图都占满了屏幕，这个时候页面没法滑动。因为你用touchstart和touchmove禁止掉了图片的默认行为，所以手指怎么滑动，页面都没反应的。刚好这个滑动的行为触发了touchstart和touchmove。

img.addEventListener('click',function(e){
　　e.preventDefault();
});