移动Web开发入门(六) -- 移动端常见问题

H5标签兼容性

Can I use

使用Can I use可以查询，H5标签在各个浏览器的兼容情况，绿色表示完全支持，黄色表示部分支持，红色表示不支持。

html5shiv

html5shiv 是一个 IE 浏览器的 HTML5 JavaScript 补丁，可以让 IE 浏览器识别并支持 HTML5 标签。

click 300ms延时

根本原因

移动端双击会缩放页面，因此移动端click事件会有300ms的等待时间判断是双击还是单击。

解决方法

方法一、禁用缩放

双击缩放是造成300ms延迟的原因，只要禁用缩放就可以解决300ms延时问题。

	<meta name="viewport" content="width=device-width,user-scalable=no">

方法二、FastClick

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。
  
原理：检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。

单行文本溢出隐藏

单行文本的溢出显示省略号，还需要加宽度width属来兼容部分浏览。

	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;

多行文本溢出隐藏

使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端。

		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;