移动端页面的特点

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

演示

*{
    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 统一移动端

[email protected]

移动端优化

[email protected]

[email protected]

canvas可以触发硬件加速
所有具有transform的元素都会硬件加速

[email protected]