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
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();
});