前端兼容 适配

一、浏览器

1、内核

浏览器	内核	优缺点
IE	trident	不安全
Chrome	webkit -> blink	速度快，有兼容
safri	webkit	有兼容
firefox	gecko	功能强大 耗性能
Opera	presto -> blink	presto 速度快，有兼容

2、浏览器兼容

1、html兼容

1. 超链接访问过后hover样式不再出现
   解决方案：修改顺序 L-V-H-A
   a:link a:visited a:hover a:active
2. 字体大小不一致：14px: IE16，下留白3px; firefox17：上留白1，下留白3
   解决：设置统一行高
   html{ font-size: 14px; line-height: 14px; }
3. IE10,11input输入内容后出现‘x’
   input::-ms-clear{display: none;}
4. IE8不支持canvas：下载Google出的Excanvas.js库
5. IE不支持html5：借用前辈封装好的js库— html5shiv.js

2、css兼容

css hack

1. 条件注释法

<!--[if IE]>这段文字只在IE显示<![END if]-->

2. 选择器前缀法

 *html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...} 只对IE6/7生效
@media \0screen {body { background: red; }} 只对IE8有效
@media \0screen\,screen\9{body { background: blue; }} 只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等

1. IE不支持css3新属性：投影 渐变 旋转 圆角
   解决：前缀

-webkit-: safri
-moz-: firefox
-o-: opera
-ms-: IE
-webkit-box-shadow: #000 0px 1px 2px;
-moz-box-shadow: #000 0px 1px 2px;
-ms-box-shadow: #000 0px 1px 2px;
-o-box-shadow: #000 0px 1px 2px;
box-shadow: #000 0px 1px 2px;

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

通配符：*{margin:0;padding:0;}

2. IE6双边距问题：
   元素float后，设置margin；ie6中显示的magrin比设置的大，后面的元素被顶到下一行

解决：在float元素上设置：display：inline；

3. 图片有默认边距：

1.把图片变成块级元素：display:block
2.把图片设置成左浮动：float:left
3.把图片父元素的字体大小设置为0
4.如果父元素下，只有一张图片，将父元素高度设置成和图片高度一致即可。
5.给图片设置：vertical-align:middle

4. IE9以下不能使用opacity属性

.box {
        /* 一点其他的样式... */
        background-color: #000;opacity: 0.5;
        /* 兼容Firefox浏览器 */
        -moz-opacity: 0.5;filter: alpha(opacity=50);
        /* IE6 */
        filter: progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=50);
}

5. min-height不兼容

{ min-height: 200px; height: auto !important; height: 200px; overflow:visible;}

6. text-align居中问题

margin-left: auto;margin-right:auto;

7. cursor:hand; safari不支持：

cursor: pointer;

8. IE8以下不支持css3的background-size属性：使用filter
9. IE8不支持CSS媒体查询：

Respond.js可帮助IE6-8兼容 “min/max-width” 媒体查询条件

<script src="https://cdn.bootcss.com/respond.js/1.1.0/respond.min.js"></script>

10. 边距重叠问题：

两个元素都设置了margin，显示最大的一个：一个盒子设置div包裹

11. 标签的高度小于10px，IE6,IE7 显示的比实际高

设置overflow：hidden 或者line-height 的值小于元素高度

12. 两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；

解决方案：父级元素设置position:relative

13. IE最小宽高不生效：IE不识别min-这个属性

#box {
   width: 80px;
   height: 35px;
}
html>body #body {
    width: auto;
    height: auto;
    min-width: 80px;
    min-height: 35px;
}

3、js兼容

1. 事件绑定：
2. 获取event对象
3. 获取event事件源对象
4. 阻止冒泡
5. 阻止默认行为
6. 获取滚轮距离
7. 访问父节点
8. innerText的问题

if (navigator.appName.indexOf("Explorer") > -1){
    document.getElementById("element").innerText = "text"; // IE
} else {
    document.getElementById("element").textContent = "text"; // 其他
}

类型浏览器	IE	其他	解决
事件绑定、删除	attachEvent、detachEvent	addEventlistener、removeEventListener
事件对象	window.event	ev
事件源对象	srcElement	target
阻止冒泡	cacelBuble = true	stopPropagation
阻止默认事件	returnValue = false	preventDefault
获取滚轮距离	body.scrollTop	document.documentElement.scrollTop	document.documentElement.scrollTop \\document.body.scrollTop
访问父节点	parentNode、parentElement	parentNode	统一使用parentNode
innerText问题	innerText	contentText
获取键盘码	e.which	e.keyCode	e.keyCode\\ e.which

4、运行机制

单线程
宏任务微任务
异步
事件循环

3、移动端兼容 ios和android

1. ios端 new Date() 问题

问题描述： ios规定日期要以“ / ”分割，而不能用“ - ”。
比如在ios：new Date(‘2023-01-01 00:00:00’) 会返回NaN（在pc端safari是Invalid Date）
解决办法： 改用“/”分割，例如：new Date(‘2023/01/01 00:00:00’)
**替换字符串： **new Date(“2023-01-01 00:00:00”).replace(/-/g, “/”);

2. ios端 h5返回不刷新页面

问题描述： ios端打开h5页面后，从a页面跳转到b页面，然后再返回a页面之后，发现a页面没有刷新。貌似是ios会在浏览网页后生成一个类似快照的东西，当返回时，直接调用这个快照进行展示，从而提高性能。安卓手机的h5返回时都会刷新，ios好像是部分机型也会刷新。
但是如果我们需要在返回时重新获取下最新的信息，这个机制就会存在bug。
解决办法：

//pageshow里的 persisted 属性 表示该页面是否从浏览器缓存中读取。
window.addEventListener('pageshow', function (event) {  
  if (event.persisted) {  
   //重载页面或者刷新数据
  }  
}); 

3. 移动端媒体自动播放

二、适配

常用单位
px 固定的单位；
em 是根据其父元素的字体大小来设置（太多的不确定性）；
rem 是根据网页的根元素（html）来设置字体大小。
vw window.innerWidth 的数值的 1%
vh window.innerHeight 的数值的 1%
rpx: （小程序单位）可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

1、静态布局：pc端

2、根据不同的分辨率加载不同的css样式文件，自适应布局

<script>
	// 分辨率大于等于1680，大部分为1920的范围情况下，调用此css
	if(window.screen.width >= 1680){
		document.write('<link rel="stylesheet" href="css/index_1920.css">');
	}
	// 分辨率在1600-1680这个范围的情况下，调用此css
	else if(window.screen.width >= 1600){
		document.write('<link rel="stylesheet" href="css/index_1600.css">');
	}
	// 分辨率小于1600的范围情况下，调用此css
	else{
		document.write('<link rel="stylesheet" href="css/index.css">');
	}
</script>

3、媒体查询

link元素中的CSS媒体查询

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

css3设置

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

viewport：视口

width=device-width:就将布局视口设置成了理想的视口。

initial-scale：[0,10]  初始缩放比例，1表示不缩放

maximum-scale：[0,10]  最小缩放比例

maximum-scale: [0,10]  最大缩放比例

user-scalable: yes／no  是否允许手动缩放页面，默认值为yes

语法：

/* 大屏幕 */
@media only screen and (min-width:1200px) {
	对应的样式
}
/* 中等屏幕 */
@media only screen and (min-width: 992px)and (max-width: 1199px) {
	对应的样式
}
/* 小屏幕 */
// 页面大于 768px， 小于 991px 时显示的样式效果
@media only screen and (min-width: 768px)and (max-width: 991px) {
	对应的样式
}
/* 手机端显示 */
// 屏幕小于 767px 时的样式
@media only screen and (max-width: 767px) {
	对应的样式
}

4、rem布局(移动端)

1、媒体查询结合rem布局

媒体查询动态修改根元素的大小，使得rem 一直在跟着变化，响应式就成功了。

2、flexble.js和rem布局：

它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。
我们要做的,就是确定好我们当前设备的html文字大小就可以了
下载地址：https://github.com/amfe/lib-flexible

1.下载flexible.js放到项目目录里去
2.引入flexible.js

<script src="js/flexible.js"></script>

css文件

body {
    min-width: 320px;
    max-width: 750px;
    /* flexible 给我们划分了 10 等份,所以应该是10rem */
    width: 10rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background: #f2f2f2;
}

3、vw+vh+rem屏幕适配方案

1. vw、vh是基于视口的布局方案，故这个meta元素的视口必须声明。（解决宽高自动适配）

 <meta name="viewport" content="width=device-width,initial-scale=1.0">

2. rem布局-解决字体适配

rem布局原理：根据CSS的媒体查询功能，更改html根字体大小，实现字体大小随屏幕尺寸变化。

@media only screen and (max-width: 1600px) and (min-width: 1280px){
   html{
     font-size: 14px;
   }
 }
 @media only screen and (max-width: 1280px) and (min-width: 960px){
   html{
     font-size: 12px;
   }
 }
 @media only screen and (max-width: 960px){
   html{
     font-size: 10px;
   }
 }

3. vw、vh、rem的使用

<template>
    <div class="box">
        
    </div>
</template>
<style>
    .box{
        width:50vw;
        height: 20vh;
        line-height: 20vh;
        font-size: 1.5rem;
        margin:0 auto;
        font-weight: bold;
        background-color: rgba(255,255,255,0.8);
    }
</style>

5、百分比布局 (流式布局)

1.左侧固定右侧自适应-定位
2.浮动+触发BFC
3.flex布局