黑龙江建设网网站一体化平台,域名网站建设流程,作图在线制作,网页设计与网站开发基础教程有移动端与PC端的项目开发#xff0c;那么移动端和PC端开发上是存在差异的#xff0c;比如 click 事件的300ms 延迟#xff0c;即移动Web页面上的click事件响应都要慢上300ms#xff0c;移动设备访问Web页面时往往需要 “双击” 或者 “捏开” 来放大页面看清页面的具体内容… 有移动端与PC端的项目开发那么移动端和PC端开发上是存在差异的比如 click 事件的300ms 延迟即移动Web页面上的click事件响应都要慢上300ms移动设备访问Web页面时往往需要 “双击” 或者 “捏开” 来放大页面看清页面的具体内容这样做的原因是为了确定用户是“单机”还是“双击”safari(macOS浏览器) 需要通过300ms的延迟来判断关于 “300毫秒的延迟” 是一个默认的规范首先先来了解这个300ms的延迟是怎么样的! meta viewport 视口 在开发移动端的时候会在head标签中去添加如下这段
meta nameviewport contentwidthdevice-width, initial-scale1.0 viewport视口设置的宽度是设备的宽度即网页的宽度是设备的宽度对比一下 1 添加 viewport 视口 —— 按钮大小不变 2 无 viewport 视口 —— 按钮大小变小 可以看到无 viewport 视口按钮太小了需要缩放后才能去触发就需要300ms的延迟当添加了 viewport 视口属性之后浏览器也不会触发 “双击” 功能那么对于300ms的延迟也就没有延迟的必要所以在安卓上添加这样的一个 viewport 视口就可以解决了也没有了300ms的延迟那既然能解决不就结束了吗meta对于某些设备浏览存在一些兼容性问题的除了用meta解决就没有别的方法了吗先来 viewport 视口的设置去掉来证实一下关于300ms延迟的存在 在移动端中通过触摸屏幕来操作页面中的内容的那么如何来模拟移动端呢相信大家都已经知道了可以通过浏览器来模拟移动端了 通过移动端浏览器提供与网页交互的事件来模拟touchstart( 手指按下触发 )touchmove( 手指滑动触发 )touchend( 手指离开触发 )
1 下面来使用原生JS来模拟对比一下移动端与PC端间是否存在延迟
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgetitleDocument/title
/head
bodybutton ontouchstarthandleStart() onclickhandleClick()点击/buttonscriptfunction handleStart(){console.log(handleStart —— ,Date.now())}function handleClick(){console.log(handleClick —— ,Date.now())}/script
/body
/html
2 测试一下三组结果 触摸handleStart的触发和点击事件handleClick的触发时间相差在300ms左右这也证实了300ms的延迟是存在的上面讲到这个viewport视口可以解决这个延迟来继续测试一下
3 viewport视口解决延迟 在head标签添加
meta nameviewport contentwidthdevice-width, initial-scale1.0 这个延迟在100ms左右浮动而不添加是在300ms左右浮动那么就有要问的不是说解决延迟吗怎么还有延迟可以自己测试一下这个添加后的延迟比不添加的延迟速度显然要快很大有时感觉可能感觉不到延迟 关于300ms的延迟操作显然是存在的那么既然在移动端开发中 ontouchstart 的触发比 onclick 的触发要快直接用 ontouchstart 触发不就好了吗为什么还需要这个 onclick 来触发这是什么原因或者说为什么不能用 ontouchstart 来解决这个问题呢 假设使用 ontouchstart 来进行触发当用户想滑动一下这个页面的时候手指放在设备上的那一刻就会触发 ontouchstart 本意只是想滑动一下这个页面查看当轮播的时候一触碰就会触发跳转本意只是想滑动到下一页轮播页罢了所以使用 ontouchstart 来代替 onclick 显然不合理目的可能不是为了触发而是滑动页面 既然 meta viewport视口 可以解决但存在兼容性的问题怎么解决下面就来讲解 fastclick fastclcik 顾名思义快速点击光听名字都能解决太强了那fastclick 是怎么来解决的同样的也是使用touchstart等上面讲到的这些操作怎么实现的呢当你的手指按下会触发touchstart会记录手指的位置和时间戳但你手指离开了触发touchend会记录手指的位置和时间戳以及位移如果对比前后时间足够短位移足够小则这是一次点击事件的触发而不是滑动页面知道了这个解决方案能力够的可以自己封装当然这里就用现成的了 当然可以看一下 fastclick这个库来到官网地址点击跳转 来到这个库之后可以看到官网中有这一段话 通过上面这段内容可以知道不是非得用而是可以分情况来查看是否需要下面来下载测试一下下载 fastclick 下载完成之后通过script标签引入
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0 script typeapplication/javascript src./path/to/fastclick.js/scripttitleDocument/title
/head
bodybutton ontouchstarthandleStart() onclickhandleClick()点击/buttonscriptif (addEventListener in document) {document.addEventListener(DOMContentLoaded, function() {FastClick.attach(document.body);}, false);}function handleStart(){console.log(handleStart —— ,Date.now())}function handleClick(){console.log(handleClick —— ,Date.now())}/script
/body
/html 延迟在100ms左右时在可接受的范围之内如果不用 fastclick 还能怎么解决 touch-action:manipulation 在 css 中设置每个元素都禁用双击缩放功能这个不需要引入任何内容属于C3 那么可以结合设置 meta viewport 解决视口问题一般会采用这种方案 那么本篇就是关于开发移动端项目当中存在的300ms事件延迟的解决方案可以通过meta viewport 、fastclick 第三方库、meta viewport touch-action 这些解决的方法可以根据实际的情况来完成这些内容
