移动端页面的特点
16lz
2021-01-26
300ms延迟 （落后的）
三百毫秒的来龙去脉
移动端300ms点击延迟和点击穿透问题
禁用缩放
如果设置了width=device-width， Android 上的 Chrome 32+ 会禁用 300ms 延时；
如果设置了 user-scalable=no，Android 上的 Chrome（所有版本）都会禁用 300ms 延迟。
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0;
分别是:初始缩放倍率,和最大缩放倍率,最小缩放倍率
触屏事件
touchcancel
touchend
touchmove
touchstart
演示
JS Bin *{ box-sizing: border-box; }body{ padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh}.divBox{ width: 100vw; height: 100vh; box-shadow: 2px 4px 12px black;}let jbox = document.querySelector('.divBox')function brush(x,y){ let div = document.createElement('div') div.style.position = 'absolute' div.style.width = '5px' div.style.height = '5px' div.style.background = 'black' div.style.top = y + 'px' div.style.left = x + 'px' div.style.borderRadius = '50%' document.body.appendChild(div)}jbox.addEventListener('touchstart',function(e){ console.log('触摸事件') let {pageX,pageY} = e.touches[0] brush(pageX,pageY) })jbox.addEventListener('touchmove',function(e){ let {pageX,pageY} = e.touches[0] brush(pageX,pageY) console.log('触摸移动')})jbox.addEventListener('touchend',function(e){ console.log('触摸结束')})jbox.addEventListener('touchcancel',function(){ console.log('触摸取消')})CSS 3
移动端最好加
*,*::after,*:before{ box-sizing: border-box; }img{ max-width: 100%; max-height: 100%;}/*让图片自适应*/使用viewport 统一移动端
153005@2x.png移动端优化
170034@2x.png 171020@2x.pngcanvas可以触发硬件加速
所有具有transform的元素都会硬件加速
171941@2x.png
更多相关文章
- Android开发之多点触摸（Multitouch）
- [置顶] android中屏幕触摸事件
- android动画学习之动画参数设置
- android上传图片过大处理
- Android(安卓)笔记5---事件处理和手势
- Android通过ImageView设置手指滑动控件缩放
- 关于Android触屏监听的一些想法
- S5PV310 Android(安卓)电容屏驱动调试
- ParallaxViewPager：ViewPager的视差背景效果