canvas 宽高等比缩放,不要用css控制初始宽高
| pc端事件 | 移动端事件 |
|---|---|
| onmousedown | ontouchstart |
| onmousemove | ontouchmove |
| onmouseup | ontouchend |
onmouseenter|onmouseleave与onmouseover|onmouseout的区别
两个事件都是在鼠标指针移动到元素上时触发。
二者区别: onmouseenter 事件不支持冒泡 。
onmouseover|onmouseout事件被触发时,该元素的祖先元素的onmouseover|onmouseout事件也会冒泡触发。
onresize 事件会在窗口或框架被调整大小时发生。
window.onresize = function () {...}
js的in查询
浏览器控制台测试:
'ontouchstart' in document.body//判断是否支持ontouchstart
false
'onmousedown' in document.body//判断是否支持onmousedown
true
移动端适配
<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 : 页面宽度 = 设备宽度
user-scalable=no : 用户是否可以缩放
initial-scale=1.0 : 初始的缩放比例1:1
maximum-scale=1.0 : 最大的缩放比例1:1
minimum-scale=1.0 : 最小的缩放比例1:1
触屏设备特性检测if (document.body.ontouchstart !== undefined) {...}
// var eraserEnabled = false;
// eraser.onclick = function () {
// eraserEnabled = !eraserEnabled;
// // console.log(eraserEnabled);
// }
测试触屏下是否有此属性,即此属性是否支持触屏
image.png












网友评论