移动常见问题

浏览器兼容问题

1. html5 兼容问题
   引入 html5shiv

2. js 兼容问题
   不要使用浏览器检测要使用特性检测

例

var requestAnimationFrame = window.requestAnimationFrame ||
	window.webkitRequestAnimationFrame ||
	window.mozRequestAnimationFrame ||
	window.oRequestAnimationFrame ||
	window.msRequestAnimationFrame ||
	function (fn) {
		setTimeout(fn, 16);
	}
requestAnimationFrame(function () {
	console.log(1);
});

3. css3 兼容问题
   (1) 注意添加前缀
   (2) 加载 Modernizr 的 js 文件
   它会检测你勾选上的特性，然后在 html 标签上加上是否支持的 class
   比如 flex 特性，会在 html 标签上加上 flex(支持) 或者 no-flex(不支持) class，这样就可以分别在不 同 class 下分别编写 css 代码了

4. 移动端动画
   优先使用 css3 的 transition 做动画，如果不行再用 animation，然后在考虑 requestAnimationFrame，如果不支持用 setTimeout，setInterval

5. 移动端 300ms 延迟
   解决方法
   (1) viewport 中加上 width=device-width，部分浏览器就不存在 300ms 延迟的问题了
   (2) 还有部分浏览器以上方法不能解决延迟问题，我们则可以引入 fastclick 库来解决这个问题，具体使用方法见官网

6. 单行和多行文字溢出省略
   见文章 css 让多出的文字用省略号表示

7. 垂直水平居中
   (1)不指定容器宽高
   (1.1) 内联元素
   (1.1.1) 文字的垂直水平居中
   不用考虑，因为是自动撑开的
   (1.1.2) 容器垂直水平居中

.model-wrapper {
	position:relative
}
.model {
	position: absolute;
	left: 50%;
	right: 50%;
	transform: translate(-50%, -50%);
}

代码1.1.1
flex 布局

.model-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
}

代码 1.1.2
(1.2) 内联块元素
(1.2.1) 文字垂直水平居中
不用考虑，因为是自动撑开的
(1.2.2) 容器垂直水平居中
同代码1.1.1、1.1.2 两种方式
(1.3) 块元素
(1.3.1) 文字垂直水平居中

.model {
	text-align: center;
}

(1.3.2) 容器垂直水平居中
同代码 1.1.1、1.1.2 两种方式

(2) 指定宽高
(2.1) 内联块元素
(2.1.1) 文字垂直水平居中
单行文字

.model {
	width: 300px;
	height: 100px;
	text-align: center;
	line-height: 100px;
}

代码2.1.1
多行文字 flex布局

.model {
	display: flex;
	justify-content: center;
	align-items: center;
}

代码 2.1.2
(2.1.2) 容器垂直水平居中
可以同代码 1.1.1 的方式

.model {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -150px;
	margin-left: -50px
}

(2.3) 块元素
(2.3.1) 文字水平垂直居中
同代码 2.1.1、2.1.2
(2.3.2) 容器水平垂直居中

.model {
	margin: 0 auto;
}