web前端：常见的移动web问题，终端触摸交互，各种bug坑如何解决

作者:陈莺莺呀更新于： 2020-05-12 15:10:35

　　web的本意是蜘蛛网和网的意思，在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本(hypertext)、超媒体(hypermedia)、超文本传输协议(HTTP)等。

　　常见的移动web问题，终端触摸交互，各种bug坑如何解决

　　移动web最佳viewport设置

　　单行文本溢出

　　.inaline{

　　overflow:hidden;

　　white-space:nowrap;

　　text-overflow:ellipsis;

　　}

　　多行文本溢出

　　.intwoline{

　　display:-webkit-box!important;

　　overflow:hidden;

　　text-overflow:ellipsis;

　　word-break:break-all;

　　-webkit-box-orient:vertical;

　　-webkit-line-clamp:2;

　　}

　　移动端click事件响应慢300ms以及tap点透的bug：

　　解决方案：使用fastclick库（听说最新版zepto已经解决这个bug）

　　touch事件：

　　安卓机只会触发一次touchstart，一次touchmove，不会触发touchend、

　　解决方案：在touchmove中加event.preventDefault();

　　注意：会导致默认行为不触发，比如scroll，滚动失效

　　弹性滚动：

　　是一种缓冲反弹的效果，改善用户体验

　　body层滚动：

　　自带弹性滚动，overflow:hidden失效，gif和定时器暂停

　　局部滚动：

　　没有弹性滚动，没有滚动惯性，不流畅

　　解决：局部滚动开启弹性滚动

　　body{

　　overflow:scroll;

　　-webkit-overflow-scrolling:touch;

　　}

　　安卓不支持原生的弹性滚动，需要使用第三方库，如：iScroll

　　下拉刷新的实现：

　　顶端下拉一点距离，页面弹性滚动向下

　　上拉加载的实现：

　　使用scroll事件，而不是touch事件（安卓机有bug）

　　网页，是网站中的一「页」，通常是HTML格式（文件扩展名为.html或.htm或.asp或.aspx或.php或.jsp等）。网页通常用图像档来提供图画。网页要透过网页浏览器来阅读。

　　网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，您的网站就是由网页组成的。如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。