300ms延遲 （落后的）
<a >三百毫秒的來龍去脈</a>
<a href="http://www.lxweimin.com/p/6e2b68a93c88">移動端300ms點擊延遲和點擊穿透問題</a>
禁用縮放
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
如果設置了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
演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div class=divBox></div>
</body>
</html>
*{
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.png
canvas可以觸發硬件加速
所有具有transform的元素都會硬件加速
171941@2x.png
