web前端：常见的移动web问题，终端触摸交互，各种bug坑如何解决
敲键小勇士
2024-04-23 23:37
web的本意是蜘蛛网和网的意思，在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本(hypertext)、超媒体(hypermedia)、超文本传输协议(HTTP)等。
常见的移动web问题，终端触摸交互，各种bug坑如何解决
移动web最佳viewport设置
<metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=no">
单行文本溢出
.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等）。网页通常用图像档来提供图画。网页要透过网页浏览器来阅读。
网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，您的网站就是由网页组成的。如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
