品牌设计
Hi,are you ready?

准备好开始了吗?
那就与我们取得联系吧

有一个品牌项目想和我们谈谈吗?您可以填写右边的表格,让我们了解您的项目需求,这是一个良好的开始,我们将会尽快与你取得联系。当然也欢迎您给我们写信或是打电话,让我们听到你的声音!

PID派点互动

地 址:广州市天河区金慧路88号11栋138单元(华南农业大学内)

电 话:+020- 3855 0205 3855 0745

传 真:+020-3855 0745

E-mail:925774558@qq.com

填写您的项目信息

如何解决网站开发中浏览器兼容性问题?

标签:网站开发,企业网站开发,广州网站开发,网站开发公司

在网站开发中,浏览器兼容性问题是每个开发人员所必须要面对的。由于我们使用的终端设备越来越多,各种浏览器的兼容性问题显得尤为重要。如果不兼容,就会影响到网站的浏览,所以我们要重视不同浏览器的兼容性问题。这篇文章主要介绍如何解决网站开发中浏览器兼容性问题,感兴趣的小伙伴们一定要看完!


网站浏览器兼容性问题及解决方式:


1.object-fit在ie11和edge中不兼容,可以一些css hacks

使用background-size和background-position替换object-fit设置图片的样式

<img class="loadingImage" src="url"/>

.loadingImage {

    width: 100%;

    height: 100%;

    transition: all 1s ease;

    object-fit: cover;

  }

上述代码中可以修改为如下:

<div class="loadingImage"></div>

.loadingImage {

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    background-image: url(url);

}

对于视频播放,object-fit:cover可以解决视频不会随着屏幕缩放的问题

<video class="video"></video>

.video {

  width: 100%;

  height: auto;

  position: relative;

  left: 50%;

  top: 50%;

  transfORM: translate(-50%, -50%);

  object-fit: cover;

}

可以使用如下CSS设置video标签,解决object-fit不兼容ie和edge的问题

<video class="video"></video>

.video {

  width: 100%;

  height: auto;

  position: relative;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  object-fit: fill;

}

2.window.onload事件会在图片等资源加载完成后执行方法,但是它不会检测视频资源是否加载完成,可以使用如下代码检测视频是否加载完成


<video id="video"></video>

let video = document.getElementById('video')

if (video.readyState === 4) {

    console.log('finish!')

}

3.css的transition执行完成后会触发transitionend事件,但是存在兼容性,可以使用下面代码解决浏览器间的兼容性

function checkTransitionEvent() {

  var el = document.createElement('div')

  var transitions = {

    'transition':'transitionend',

    'OTransition':'oTransitionEnd',

    'MozTransition':'transitionend',

    'WEBkitTransition':'webkitTransitionEnd'

  }


  for(t in transitions){

      if( el.style[t] !== undefined ){

          return transitions[t];

      }

  }

}

4.onwheel事件兼容性

support() {

  let support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"

    document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"

    "DOMMouseScroll";

  return support

},

5.wheel事件的wheelDelta和detail属性在不同浏览器下值不同,可以使用如下代码对其进行normalize

var wheelDistance = function(evt){

  if (!evt) evt = event;

  var w=evt.wheelDelta, d=evt.detail;

  if (d){

    if (w) return w/d/40*d>0?1:-1; // Opera

    else return -d/3;              // Firefox;         TODO: do not /3 for OS X

  } else return w/120;             // IE/Safari/Chrome TODO: /3 for Chrome OS X

};

var wheelDirection = function(evt){

  if (!evt) evt = event;

  return (evt.detail<0) ? 1 : (evt.wheelDelta>0) ? 1 : -1;

};

6.requestAnimationFrame兼容性

let cancelAnimationFrame = window.cancelAnimationFrame 

  || window.mozCancelAnimationFrame 

  || function(id) { clearTimeout(id) };

let requestAnimationFrame = window.requestAnimationFrame 

  || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame 

  || window.msRequestAnimationFrame

  || function (callback) { return setTimeout(callback, 1000 / 60) };

以上就是网站开发过程中,网站浏览器兼容性常碰到的一些问题,我们在网站开发过程中要多总结,多尝试,解决各种兼容性的问题。

更多网站开发广州网站开发网站开发公司企业网站开发等相关需求,欢迎您咨询派点互动

返回列表
在线沟通

Are you interested in ?

感兴趣吗?

有关我们服务的更多信息,请联系

135 7039 2915 李先生

与我们合作

与派点合作,您将会得到更成熟的网站建设服务。我们以客户至上,同时也相互挑战,力求呈现最好的网站建设成果。

品牌顾问热线(李生):

+135 7039 2915

TOP

QQ客服

免费电话