浏览器兼容性问题

PC端

pc端因为做的比较少,这里就举几个常见的问题:

css样式的兼容性问题:

1、不同浏览器的margin,padding值不同,通常我们都是全局清除
*{margin:0;paddding:0}
2、不同浏览器对css3的支持度不同,解决方案就是加前缀
-webkit- -moz-
3、对于一些要兼容ie版本的,这里就不细举了,毕竟ie10以下的很少有人再去处理了,要兼容低版本ie和一些其他浏览器也可以用hack的方法,就是在样式前加上前缀,例如:
_ * +

js兼容性问题 如果使用原生其实还是比较多问题的

1、比如获取浏览器可以区宽高、滚动距离
2、鼠标、键盘事件等
3、原生获取样式
4、火狐的滚轮事件

var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽

var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽
var 
scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//网页被卷去的高

//获取鼠标的位置 这个在做拖拽时常用
 document.οnclick=function(ev){//兼容写法;
      var e=ev||window.event;
      var mouseX=e.clientX;//鼠标X轴的坐标
      var mouseY=e.clientY;//鼠标Y轴的坐标
  }

//获取css样式 这在最初我写原生js的时候会用这种方法 现在框架也就不考虑了
   function getStyle(object,oCss) {
      if (object.currentStyle) {
          return object.currentStyle[oCss];//IE
      }else{
          return getComputedStyle(object,null)[oCss];//除了IE
       }
    }

//还有奇葩的火狐滚轮事件 也是听说过没有遇到过
  //火狐中的滚轮事件
    document.addEventListener("DOMMouseScroll",function(event){
        alert(event.detail);//若前滚的话为 -3,后滚的话为 3
    },false)
    //非火狐中的滚轮事件
    document.onmousewheel=function(event){
        alert(event.detail);//前滚:120,后滚:-120
    }


移动端

移动端的兼容性主要是出在android、ios中,他们因为内核的不一样,导致出现很多问题,下面看下我遇到的常见的问题

1、键盘弹出事件

这是一个很有意思的问题,当高度为100%时,android在键盘弹出的时候,我们可能会遇到以下问题:
1、遮住了我们原来的内容,看不到输入框
2、如果底部有按钮,按钮从底部弹上来,影响视觉效果
3、样式错乱

出现这个问题的原因就是android的键盘是算入总高度的,ios的键盘弹出不算入总高度,原来1000px的高度变成了700px,所以我们从这解决问题就很简单了。

解决样式错乱我们可以给元素设置固定高度,用px代替百分比,随之带来的是键盘被遮挡的问题,解决这东西我们可以用scrollIntoView,让内容滚动到可视区,或者设置元素向上滚动键盘的高度。

var oHeight = document.body.offsetHeight
window.onresize=function(){
    var height = document.body.offsetHeight
    window.scrollTo(0,height-oHeight)
}

解决底部按钮弹上来这个问题可以有多种解决方案,只要看不见就好了。
所以我们可以在键盘弹出的时候可以采用以下方法:
1、将按钮的定位改为absolute,bottom为负数
2、将按钮隐藏,键盘收起的时候将按钮显示

2、300ms延迟

这是存在于ios的一个问题。之前为了辨别双击放大事件,给了click一个延迟,常用的解决方案就是因一个fastClick.js

3、ios会将长串的数字识别为电话

加一个meta标签即可
<meta content="telephone=no" name="format-detection" />

4、ios label内的checkbox点击失效

我们可以给label添加一个点击事件,通过点击事件改变checkbox的值

5、进入页面输入框自动聚焦,ios页面会卡顿 android无法调出键盘

ios卡顿的问题加一个延迟即可,设置300ms之后再获取焦点
android因为我是调的库解决键盘不弹出的问题,这里原生我也不清楚怎么写。

6、ios中给input设置type=search,但是键盘右下角不是搜索的字样

这里把input放进form表单即可

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容