前言

本文主要记录了移动端的常见问题，包含H5标签兼容性的查看、H5标签补丁的简单介绍和click 300ms延时问题以及单行文本溢出隐藏和多行文本溢出隐藏的解决方案。

H5标签兼容性

H5标签兼容性查看

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

H5标签补丁

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;

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！