html5兼容手机端 h5移动端浏览器兼容

一、HTML:

ie版本：不兼容header、footer，可以在其中引入 https://github.com/aFarkas/html5shiv
移动端：H5大部分都兼容

二、JS：

• 做特性检测，不要做浏览器检测
• 前缀

var requestAnimationFrame = window.requestAnimationFrame ||  
							window.webkitRequestAnimationFrame|| 
							window.mozRequestAnimationFrame || 
							window.oRequestAnimationFrame || 
							window.msRequestAnimationFrame ||
function(){
    setTimeout();
}

requestAnimationFrame(function(){
    console.log(1);
})

三、CSS3

插件：Emmet
transition库：Modernizr 网址：https://modernizr.com
动画效果animation的库：Animate.css
animationFrame()

四、点击有300ms的延迟

为什么会出现300ms的延迟的，因为存在双击放大的问题，在第一次点击时，他会默认等待你的第二次点击，如果在300ms内没有第二次点击才会被认为是单击。很多的浏览器已经解决了这个问题，chrom浏览器为例，他默认 <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>标签中的带有content="width=device-width属性的是不存在双击放大的，默认取消了300ms的延迟
解决办法——库：fastdick

<script src="js/fastclick.js"></script>
 <script>
        if('addEventListener' in document){
            document.addEventListener('DOMContentLoaded',function(){
                FastClick.attach(document.body);
            },false)
        }
 </script>

五、单行和多行文字溢出省略

1. 单行文字溢出省略

.text-ellipsis {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

• 这个不能和flex布局一起使用，可以包裹使用

.multiline-ellipsis{
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	white-space:normal !important;
	word-wrap:break-word;
}

• 可以和flex布局一起使用，最好不要和盒子的高度一起使用，用自身高度将他撑开

六、水平居中和垂直居中

1. 容器宽高自适应，没有指定宽高，内容撑开

1.1 内联元素，不能设置宽高，内容撑开
1.1.1 文字水平垂直居中，多行文字

.text {
	display:inline;
	padding:0 20px;
}

1.1.2 容器水平垂直居中，内联元素

• 方法一：万能方法

.text{
	position:absolute;  /**父容器要绝对定位 position:fixed;**/
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}

• 方法二：用flex布局(这个也很万能！！！但是要考虑兼容问题，一般移动端都能用)

.father{/**父容器**/
	display:flex;
	justify-content:center;
	align-items:center;
}

1.2 内联块元素，不能设置宽高，内容撑开
1.2.1 文字水平垂直居中，多行文字

.text {
	display:inline;
	padding:30px 20px;
}

1.2.2 容器水平垂直居中，内联元素

.text{
	position:absolute;  /**父容器要绝对定位 position:fixed;**/
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}

1.3 块元素，不能设置宽高
1.3.1 文字水平垂直居中，多行文字

.text {
	display:block;/*宽度自动百分百撑开*/
	text-align:center;
	padding:30px 0;
}

1.3.2 容器水平垂直居中，内联元素

.text{
	position:absolute;  /**父容器要绝对定位 position:fixed;**/
	dispaly:block;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}

2. 指定容器宽高

2.1 内联元素，不能设置宽高，内容撑开
2.2 内联块元素，设置宽高
2.2.1 文字水平垂直居中，多行文字

.text {
	/*单行文字*/
	display:inline-block;
	width:300px;
	height:100px;
	text-align:center;/*每一行都会水平居中*/
	line-height:100px;
	/*多行文字*/
	display:flex;
	justify-content:center;/*整体水平居中*/
	align-items:center;
	
}

2.2.2 容器水平垂直居中，内联块元素

.text {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(50%,50%);
}

2.3 块元素，设置宽高
2.3.1 文字水平垂直居中，多行文字

.text {
	display:block;
	text-align:center;
	line-height:100px;
}

2.3.2 容器水平垂直居中，块元素

.text{
	position:absolute;
	left:50%;
	top:50%;
	/*transform:translate(50%,50%);*/
	margin-left:150px;
	margin-top:-50px;

}