前端兼容性问题

1,安卓微信环境会把页面顶起

解决办法:

 var broswer = sessionStorage.getItem("temp");
    var u = navigator.userAgent;
    var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
    var flag;
    var myFunction;
    if (broswer == "wx" && isiOS) {
      document.body.addEventListener("focusin", () => {
        //软键盘弹起事件
        flag = true;
        clearTimeout(myFunction);
      });
      document.body.addEventListener("focusout", () => {
        //软键盘关闭事件
        flag = false;
        if (!flag) {
          myFunction = setTimeout(function() {
            window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
          }, 200);
        } else {
          return;
        }
      });
    } else {
      return;
    }

2, ie浏览器 ie9的时候不支持flex布局

解决办法:用float布局

3, ios12以下的版本 嵌套在微信公众号的iframe不能滑动

解决办法:

<!doctype html>
<html lang="en">

	<head>
		<style>

		</style>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<title>Document</title>
	</head>

	<body>
		<div style="height:100%">  
			<div style="webkit-overflow-scrolling: touch;overflow-y:scroll">  
				<iframe style="100%;height:100%" frameborder="0" src="http://res-md.jingbaotech.com/clause/fd-lgb-gryw.html"></iframe>
			</div>
		</div>

	</body>

</html>
原文地址:https://www.cnblogs.com/lml-lml/p/10476514.html