0
点赞
收藏
分享

微信扫一扫

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

前言

本文主要记录了移动端的常见问题,包含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;

本文到此结束

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

举报

相关推荐

0 条评论