移动端页面的特点
2017-05-13 本文已影响74人
饥人谷_hak
300ms延迟 （落后的）
<a href="https://thx.github.io/mobile/300ms-click-delay">三百毫秒的来龙去脉</a>
<a href="http://www.jianshu.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
