前端常见的兼容性问题--web端和移动端

web端：

css:

1，不同浏览器的标签默认的margin和padding不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

碰到频率:100%

解决方案：

可以使用Normalize来抹平默认样式的差异。

也可以使用如下代码：

* { margin:0; padding:0; }

 

2，图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用。（根本原因是fontSize）

碰到几率：20% 

解决方案：

1）给img标签添加左浮动float：left；

2）给img标签添加display：block；

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（也可使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以尽量不要使用）

 

3，各种特殊样式的兼容，比如透明度、圆角、阴影等。特殊样式每个浏览器的代码区别很大，所以，只能现查资料通过给不同浏览器写不同的代码来解决。

 

4，清除浮动：

.clearfix::after { content: ""; display: table; clear: both; } .clearfix { *zoom: 1; }

 

5，上下margin的重叠问题

描述：给上边元素设置了margin-bottom，给下边元素设置了margin-top，浏览器只会识别较大值；

解决方案：margin-top和margin-bottom中选择一个，只设置其中一个值；

 

javascript:

1.event.srcElement

IE下，even不存在target属性

srcObj = event.srcElement ? event.srcElement : event.target;

 

2.父节点parentElement

ele.parentElement //firebox不支持 ele.parentNode //通用

 

3.移除节点

removeNode(); //firebox不支持 removeChild(); //通用，取上一层父节点再移除子节点

 

4.坐标

var page = {}; page.x = event.x ? event.x : event.pageX; page.y = event.y ? event.y:event.pageY; //event的x,y在IE中支持，pageX和pageY在Firefox中支持

 

5.事件监听

function addEvent(elem, eventName, handler) { 　　if (elem.attachEvent) { 　　　　elem.attachEvent("on" + eventName,function(){ 　　　　　　handler.call(elem)}); 　 //此处使用回调函数call()，让this指向elem　　 } else if (elem.addEventListener) { 　　 elem.addEventListener(eventName, handler, false);　　 } } function removeEvent(elem, eventName, handler) { if (elem.detachEvent) { 　　elem.detachEvent("on" + eventName,function(){ 　　　 handler.call(elem)}); 　　　　//此处使用回调函数call()，让this指向elem　　 } else if (elem.removeEventListener) { 　　elem.removeEventListener(eventName, handler, false);　　 } } //IE提供了attachEvent和detachEvent两个接口，而Firefox提供的是addEventListener和removeEventListener。

 

6.键盘事件 keyCode

function getKeyCode(e){ //兼容IE和Firefox获得keyBoardEvent对象 e = e ? e : (window.event ? window.event : "") //兼容IE和Firefox获得keyBoardEvent对象的键值 return e.keyCode ? e.keyCode : e.which; } //IE：e.keyCode //fireFox: e.which

 

移动端：

1.IOS移动端click事件300ms的延迟相应

移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。

这是由于区分单机事件和双击屏幕缩放的 历史原因 造成的。

解决方式：

• fastclick可以解决在手机上点击事件的300ms延迟
• zepto的touch模块，tap事件也是为了解决在click的延迟问题
• 触摸屏的相应顺序为touchstart-->touchmove-->touchend-->click，也可以通过绑定ontouchstart事件，加快事件的响应，解决300ms的延迟问题

 

2.ios的一些情况下对非可点击元素（label，span）监听click事件，iso下不会触发，css增加cursor：pointer就搞定了。

 

3.h5底部输入框被键盘遮挡问题

h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。可采用如下方式解决

 

var oHeight = $(document).height(); //浏览器当前的高度 $(window).resize(function(){ if($(document).height() < oHeight){ $("#footer").css("position","static"); }else{ $("#footer").css("position","absolute"); } });

 

4.不让 Android 手机识别邮箱

<meta content="email=no" name="format-detection" />

5.禁止 iOS 识别长串数字为电话

<meta content="telephone=no" name="format-detection" />

6.禁止 iOS 弹出各种操作窗口

-webkit-touch-callout:none

7.消除 transition 闪屏

-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ -webkit-backface-visibility: hidden; /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/

8.iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格

可以通过正则去掉 this.value = this.value.replace(/u2006/g, '');

9.禁止ios和android用户选中文字

-webkit-user-select:none

10.CSS动画页面闪白,动画卡顿

解决方法: 1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位 2.开启硬件加速

 

-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

 

11.fixed定位缺陷

• ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
• android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
• ios4下不支持position:fixed
• 解决方案： 可用iScroll插件解决这个问题

 

17.阻止旋转屏幕时自动调整字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

 

18 Input 的placeholder会出现文本位置偏上的情况

input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal

 

19 往返缓存问题

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

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

 

20. calc的兼容性处理

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。

Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：

div { 95%; -webkit-calc(100% - 50px); calc(100% - 50px); }

 

21 在移动端修改难看的点击的高亮效果，iOS和安卓下都有效：

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

 

22. overflow: auto; IOS手机滚动卡顿

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

 

还有其他移动端适配问题，可以参考这个 https://juejin.im/post/5cddf289f265da038f77696c?utm_source=gold_browser_extension#heading-1