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;